Какой аргумент я должен предоставить jQuery.find() для выбора элементов children и других элементов? Я не могу привести селектор с помощью ">", а "*" выберет всех потомков, а не только прямых детей.
Я знаю jQuery.children(), но это для библиотеки, поэтому пользователь может предоставить свой собственный селектор, и я хочу убедиться, что у них есть способ выбрать только прямых детей (без добавления большого количества моих собственных логика).
редактировать
Я хочу использовать jQuery.find()
только для поиска элементов в дочерних элементах первого уровня родительского элемента, а не для детей.
Пример:
<parent>
<child-1>
<child-2></child-2>
</child-1>
<child-1>
</child-1>
</parent>
Я хочу искать только элементы child-1
а не их дети (например, child-2)
*РЕДАКТИРОВАТЬ:**
Для более подробного объяснения это угловая директива, которая идет на элемент таблицы. Директива должна иметь возможность находить строки таблицы, но предназначена для использования в широком спектре шаблонов, поэтому у нее может быть селектор для строк. Иногда строки не имеют четких функций, кроме того, что они являются дочерними div-элементами для исходного элемента; в других случаях ряды являются внуками или даже правнуками.
Начните свой селектор с помощью >
как вы упомянули в своем вопросе. Попробуй:
var s = ".classA",
n = $('#wrapper').find('>'+s).length;
alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
<div class="classA"></div> <!-- Selected -->
<div class="classA"> <!-- Selected -->
<div class="classA"></div> <!-- Ignored -->
</div>
<div class="classC">
<div class="classA"></div> <!-- Ignored -->
</div>
<div class="classB">
<div class="classB"></div>
</div>
<div class="classA"></div> <!-- Selected -->
</div>
Или используйте $.children()
, как вы упомянули в своем вопросе:
var s = ".classA",
n = $('#wrapper').children(s).length;
alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
<div class="classA"></div> <!-- Selected -->
<div class="classA"> <!-- Selected -->
<div class="classA"></div> <!-- Ignored -->
</div>
<div class="classC">
<div class="classA"></div> <!-- Ignored -->
</div>
<div class="classB">
<div class="classB"></div>
</div>
<div class="classA"></div> <!-- Selected -->
</div>
>
не является стандартным CSS, верно? Я даже не подумал попробовать это из-за этого и на странице API .find, не упоминая ничего подобного. Работал как шарм, хотя.
>
, но здесь он применяется к элементу DOM, на который ссылается jQuery, поэтому он не является действительно "ведущим".
Используйте Immediate Child Elements с помощью >
этого кода, который вам нужен:
elemnt.find("> selector");
Это должно делать свое дело.
Я знаю jQuery.children(), но это для библиотеки, поэтому пользователь может предоставить свой собственный селектор
Но JQuery .children()
получает селектор в качестве параметра:
.children([селектор])
Описание. Получите дочерние элементы каждого элемента в наборе согласованных элементов, необязательно отфильтрованных селектором.