Выбор только первого элемента уровня, а не дочерних элементов с тем же именем элемента

Question

Как бы я выбрал только первый уровень .block, а не какой-либо из дочерних?

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

<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>

Answer 1

Если в этом примере разметки есть родительский элемент, например, ниже. В противном случае родитель будет body, если это допустимый 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' });

Answer 2

Вы можете использовать селектор :first, чтобы выбрать только первый соответствующий элемент .block:

$('.block:first')

Это работает, потому что jQuery сопоставляет элементы в порядке документов. Самый внешний элемент .block будет первым элементом, которому соответствует .block, а :first отфильтрует, чтобы вернуть только его.

Обратите внимание, что :first отличается от :first-child.

РЕДАКТИРОВАТЬ : В ответ на ваше обновление вы можете написать следующее, которое будет работать, только если все элементы вложены три глубины:

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

Вы можете написать более надежное решение, используя вызов функции:

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

Это найдет все элементы .block, а затем удалит все совпадающие элементы, у которых есть предок, соответствующий .block. (Вы можете заменить closest на parent, если хотите).

Answer 3

$('#parent').children('.block');

См. .children () jQuery справочник.

Answer 4

Попробуйте это:

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

edit: убраны пробелы. спасибо: -) .... теперь должно быть хорошо.

НТН