Ошибка при использовании jQuery Метода find

186

14 июля 2018, 23:50

Есть элементы input нужно выбрать элемент по атрибуту name

const inputs = $('input'); 
console.log('Found: ' + inputs.find('[name="firstName"]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<input type="text" name="firstName"> 
<input type="text" name="lastName"> 
<input class="ss" type="text" name="middleName">

код

 $('[name="firstName"])'

работает правильно и возвращает нужный элемент

но код

inputs.find('[name="firstName"]')

ничего не возвращает

В чем ошибка, может я не правильно понимаю работу метода find ?

Answer 1

find ищет в дочерних элементах.

Так как внутри input не может быть дочерних элементов, результат закономерный - пустая коллекция.

Если из коллекции нужно выбрать лишь некоторые - стоит воспользоваться методом filter

inputs.filter('[name="firstName"]')

const inputs = $('input'); 
console.log('Found: ' + inputs.filter('[name="firstName"]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<input type="text" name="firstName"> 
<input type="text" name="lastName"> 
<input class="ss" type="text" name="middleName">

Answer 2

Что логично. Метод find ищет дочерние элементы. Если вам нужно отфильтровать текущую коллекцию, то используйте метод filter().

const inputs = $('input'); 
console.log('inputs.find: ' + inputs.find('[name="firstName"]').length); 
console.log('inputs.filter: ' + inputs.filter('[name="firstName"]').length); 
 
const div = $('.inputs'); 
console.log('div.find: ' + div.find('[name="firstName"]').length); 
console.log('div.filter: ' + div.filter('[name="firstName"]').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<div class="inputs"> 
  <input type="text" name="firstName"> 
  <input type="text" name="lastName"> 
  <input class="ss" type="text" name="middleName"> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как отследить закрытие dropdown menu в bootstrap4?

Нужно сделать так что бы при закрытии dropdown menu - у меня очищался пользовательский вводСейчас у меня реализовано вот так, но этот вариант не подходит,...

170

jQuery