Почему не работает $(this).closest jQuery?

Question

[Дмитрий]

Доброго времени суток.
Написал для своего сайта простенький скрипт поиска по фамилии, через ajax получаю список фамилий:

$(".search_family").keyup(function(){
	var searchString = this.value;		
	$.ajax({
		type: "POST",
		url: "../admin/search_family.php",
		data:'query='+searchString,
		success: function(data){
			$(".search_result").show();
			$(".search_result").html(data);
		}
	});
});

Хочу чтобы при клике по одной из них - поле в которое я вводил фамилию заполнялось ей и становилось disabled. Написал такой код: https://codepen.io/DmitryRS/pen/WNbgyxx но почему то не работает, понять не могу почему...

Написать просто $(.search_family).val(family) - нельзя, т.к. полей на одной странице может быть очень много. Нужно именно через поиск вышестоящего элемента, что как раз closest и делает, но почему не работает - я не понимаю =(((
Заранее спасибо!

Answer 1

[Виталий Першин]

closest находит ближайшего родителя удовлетворяющего условию, а у вас search_family стоит даже не рядом с инпут. Вам нужно реализовать что-то вроде этого:


Находим родительский блок и внутри него ищем элемент который хотим скрыть, в вашем случае это search_family

Comments

[Дмитрий]

Виталий огромное спасибо! Посмотрел как Вы удалили input и переделал:

var input = $(this).closest('.parent').find('.search_family');
$(input).val(family);
$(input).attr("disabled", true);

[Дмитрий]

Т.е. через closest нельзя искать элемент, а только родителя? Я правильно понял?
Именно по этому не сработал var input = $(this).closest('.search_family'), но сработало var input = $(this).closest('.parent').find('.search_family');

[Виталий Першин]

Дмитрий, Да closest ищет первого родителя, который удовлетворяет условию двигаясь по цепочке родителей все время вверх