Выберите конкретный ближайший элемент - PullRequest
Новая
       14

Выберите конкретный ближайший элемент

4 голосов
/ 01 ноября 2010

У меня есть следующий HTML-код: 

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

Когда я нажимаю на якорный тег, я хочу выбрать <input>, ближайший к моей ссылке, и получить ее значение.Как я могу это сделать ?Я пытался: 

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

но безуспешно.

Ответы [ 4 ]

3 голосов
/ 01 ноября 2010

Название функции closest вводит в заблуждение: на самом деле возвращается ближайший предок.

Правильный код будет: 

var value = $(this).parent().siblings('td').children('input').val();

Я бы не рекомендовал привязывать обработчик событий к тегам привязки alllllllll; это будет неэффективно, если на странице есть несколько таких элементов. Вместо этого я бы настоятельно рекомендовал бы использовать делегат () или live () вместо. 

$('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

Это связывает обработчик событий с table (один раз), а затем использует механизмы всплывающих событий JavaScripts, чтобы обнаружить щелчок по элементам, которые соответствуют селектору, переданному в первом аргументе (в данном случае ваши кнопки удаления).

3 голосов
/ 01 ноября 2010

Если вы посмотрите на документацию для ближайшего , то увидите, что там написано, что он находит предков ..

Описание : получить первое предок элемент, который соответствует селектору, начиная с текущего элемента и прогрессируя вверх через дерево DOM.

вход в вашем случае не является предком ссылки .delete.

Вам нужно переместиться вверх с помощью .closest('tr'), а затем перейти вниз, чтобы найти ввод с помощью .find('input')

так 

var val = $(this).closest('tr').find('input').val();
0 голосов
/ 01 ноября 2010

См. Рабочая демоверсия

Вы не можете использовать closest там, попробуйте это: 

 $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

parent() используется длявернуться к родительскому элементу td ссылки, а затем prev() используется для поиска предыдущего брата td и, наконец, с помощью метода find ищется input.

Дополнительная информация:

0 голосов
/ 01 ноября 2010

Попробуйте 

$('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});
...