Странное поведение jQuery .prev()

#jquery

#jquery

Вопрос:

У меня простой HTML-код:

 <input type='hidden' name='cat_id' value='123'/>
<a href='#' class='edit'>Edit</a>
<a href='#' class='delete delete-link'>Delete</a>
 

И простой JS-код:

 $("a.delete-link").click(function() {
var id = $(this).prev($('input[name="cat_id"]')).val();
    alert(id);
});
 

Все просто и очевидно, получаем значение предыдущего ввода с именем ‘cat_id’. Но он просто возвращает пустую строку (значение действительно определено). Я подумал, может быть, селектор неправильный:

 var id = $(this).prev($('input[name="cat_id"]')).length;
alert(id);
 

Возвращает 1. Работает.
Я просто понятия не имел, что происходит, и попытался

 var id = $(this).prev($('input[name="cat_id"]')).attr('name');
alert(id);
 

Возвращает ‘undefined’. Странно. Есть идеи? Попробовал prevAll вместо prev, эффект тот же. Версия jQuery 1.6.4

Ответ №1:

 $("a.delete-link").click(function() {
var id = $(this).prev('input[name="cat_id"]').val();
    alert(id);
});
 

.prev()

Вы должны передать выражение селектора (строку) в метод .prev() вместо объекта jQuery.

Ответ №2:

prev Метод принимает селектор, а не объект jQuery:

 var id = $(this).prev('input[name="cat_id"]').val();
 

Однако в данном случае это вам не поможет. Поскольку селектор не соответствует предыдущему элементу (ссылке редактирования), вы получите пустой объект jQuery и val не вернете идентификатор.

Вы можете использовать метод siblings or prevAll для поиска элемента:

 var id = $(this).siblings('input[name="cat_id"]').val();