jQuery найти ребенка на основе выбора класса, соответствующего родителям

Я пытаюсь найти потомков определенного узла, используя метод jquery .find(). Я заметил, что .find() не соответствует элементам, основанным на свойствах родителей над текущим узлом в дереве. Первый поиск возвращает 0 элементов, но второй поиск возвращает элемент, который я искал. Мой вопрос в том, является ли это ограничение шаблона селектора, разрешенного для метода find, и находит единственную функцию jquery, которая имеет это ограничение? Я бы ожидал, что оба из них вернут один и тот же элемент. Кроме того, существует ли еще один метод jquery, который будет более лаконично выполнять то же самое, что и второе. Это упрощенный пример того, что я пытаюсь сделать, и я не могу удалить .find('.input-group'), поскольку это вход в мою функцию.jQuery найти ребенка на основе выбора класса, соответствующего родителям

$(document).find('.input-group').find('.form-group .form-control') 
 
$(document).find('.input-group').find('.form-control').filter('.form-group .form-control')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<body> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
     <input type="checkbox" aria-label="CVV Disabled" value=""> 
 
    </span> 
 
     <input id="vtCvv" name="vtCvv" type="password" class="form-control" required="true" data-bv-field="vtCvv"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-01-08 park896

Почему бы вам не просто использовать '$ (« Форма-группы .Входной-группы .FORM-контроль»)' –

Я понимаю, что я мог бы сделать, что в этом простом примере. Вот почему я сказал, что не могу удалить '.find ('. Input-group')'. Моя функция принимает объект jquery, и я не контролирую вход. Я просто пытаюсь найти всех потомков ввода, которые будут соответствовать селектору .form-group .form-control, если он был запущен из корня документа. – park896

.find() ищет потомок элемента. Вы пытаетесь найти родителя, а потом потомка.

Вы можете найти .input-group, а затем пройти в обратном направлении через DOM в «ближайший» .form-group с помощью .closest(), а затем вы можете перемещаться вниз .form-control так:

$(document).find('.input-group').closest('.form-group').find(".form-control")

или вы могли бы использовать .parent(), чтобы вернуться назад к .form-group как так:

$(document).find('.input-group').parent().find(".form-control")

Я предпочитаю .closest(), потому что, если другой элемент был добавлен между .input-group и form-group родитель будет отличаться, но .closest все равно будет работать.

источник

2015-01-08 21:53:28 jmore009

Это то, что я подозревал. Я надеялся, что, поскольку другие методы jquery, такие как '.filter()' и '.is()', будут учитывать родительские узлы при обработке селектора, что функция '.find()' или какая-либо другая функция поиска потомков также будет иметь поведение. К сожалению, мне, вероятно, придется придерживаться решения '.find(). Filter()', потому что я не знаю, будет ли вход в мою функцию объектом jquery, который находится выше или ниже элемента '.form-group' в DOM, поэтому я не могу использовать '.closest()' – park896

@ park896 Чтобы добавить к этому ответу, вы также можете использовать '$ ('. form-group: has (.input-group) .form-control')', которые делают тоже самое. Я не знаю, что быстрее, хотя ... –

$('.form-group .input-group').find('.form-control');

источник

2015-01-08 21:57:41

jQuery найти ребенка на основе выбора класса, соответствующего родителям

ответ

Смежные вопросы