Tuesday, March 1, 2011

Selecting only first level element, not child elements with the same element name

How would I select only the first level .block and not any of the children?

$('.block:not("Children of this here")') <--

<div class="block"> <!-- this -->
  <div class="block"> <!-- not this -->
    <div class="block"> <!-- not this -->

    </div>
  </div>
</div>

<div class="block"> <!-- and this -->
  <div class="block"> <!-- not this -->
    <div class="block"> <!-- not this -->

    </div>
  </div>
</div>
From stackoverflow
  • If that sample markup has a parent element, for example below. If not, the parent will be body if it is valid HTML.

    HTML

    <div id="parent">
    <div class="block">
      <div class="block">
        <div class="block">
    
        </div>
      </div>
    </div>
    </div>
    

    jQuery

    $('#parent > .block').css({ border: '1px solid red' });
    
    Alex Sexton : yay for reasonable solutions!
  • Try this:

    $("div.block:first").<what you want to do>
    

    edit: removed the spaces. thanks :-)....now it should be good.

    HTH

    SLaks : This will not work (Because of the spaces)
    alex : You still have an extra space there, unless the `.block` is a child of a `div` element.
  • You can use the :first selector to select only the first matching .block element:

    $('.block:first')
    

    This works because jQuery matches elements in document order. The outermost .block element will be the first element matched by .block, and :first will filter to only return it.

    Note that :first is not the same as :first-child.

    EDIT: In response to your update, you can write the following, which will only work if all of the elements are nested three deep:

    $('.block:note(:has(.block .block))')
    

    You can write a more robust solution using a function call:

    $('.block').not(function() { return $(this).closest('.block').length; })
    

    This will find all .block elements, then remove any matched elements that have an ancestor matching .block. (You can replace closest with parent if you want to).

    tester : Sorry I updated the question.. I need to match the first .block of each nest of blocks, so I don't know if this will work since it finds the very first block in the doc

0 comments:

Post a Comment