Как выбрать следующий элемент после $ (this)?

Question

У меня есть этот код:

$("td").on("click", function(){ 
 
    var result = $(this).closest('table').siblings('form').find('input[name="inputname"]').attr('value'); 
 
    alert(result); 
 
});

td { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tbody> 
 
    <tr> 
 
     <td>click</td> 
 
    <tr> 
 
</tbody> 
 
</table> 
 
<form> 
 
<input name = 'inputname' value = "10"> 
 
</form> 
 
<form> 
 
<input name = 'inputname' value = "12"> 
 
</form>

При нажатии на click, он предупреждает 10. Все отлично, 10 - это именно то, что мне нужно. Но я не знаю, почему у меня плохое чувство о .siblings('form'), потому что второй form также находится в области братьев и сестер, что table. Хотя мне просто нужно выбрать form, который находится под table, только один (не второй form).

Опять же, выход правильный, и все, что я хочу, является альтернативой для .siblings(form) в этом случае, есть ли?

Иными словами, как я могу определить это в jQuery?

$(this).closest('table')./* next form */.find('input[name="inputname"]').attr('value'); 

Answer 1

siblings('form') возвращает два совпадения для вашего образца HTML. Только потому, что вы заканчиваете цепочку с вызовом attr, вы получаете только один результат. Как указано в документах:

Метод .attr() получает значение атрибута только для первого элемента в согласованном наборе.

Обратите внимание, что siblings также выглядит обратным для совпадений, поэтому, если у вас будет форма, предшествующая таблице, она будет искать поле ввода там.

Вы можете использовать next('form').first() вместо siblings('form'), чтобы быть уверенным, что только вперед, и только первый матч.

Answer 2

Ваше плохое чувство правильно. Однажды ваш дизайнер хотел бы обернуть некоторые элементы в некоторые другие элементы, и внезапно программа перестанет работать.
главным образом вызывать .siblings("form") скорее всего не будет form buth rather a <div> (в котором находятся form).

Я бы для пользовательских data-* атрибута:

$("[data-click]").on("click", function() { 
 
    var target = $(this).data("click"); 
 
    var result = $("[data-target='"+target+"']").find("[name=inputname]").val(); 
 
    alert(result); 
 
});

[data-click] { /* how cool is that ;) */ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td data-click="form_1">click</td> 
 
    <tr> 
 
    </tbody> 
 
</table> 
 

 
<form data-target="form_1"> 
 
    <input name = 'inputname' value = "10"> 
 
</form> 
 

 
<form data-target="form_2"> 
 
    <input name = 'inputname' value = "12"> 
 
</form>

Возможно settign в data-target к input элемент был бы еще лучше идея!

Answer 3

Что относительно этого?

$("td").on("click", function(){ 
 
    var result = $(this).closest('table').next('form').siblings('form').find('input[name="inputname"]').attr('value'); 
 
    alert(result); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tbody> 
 
    <tr> 
 
     <td>click</td> 
 
    <tr> 
 
</tbody> 
 
</table> 
 
<form> 
 
<input name = 'inputname' value = "10"> 
 
</form> 
 
<form> 
 
<input name = 'inputname' value = "12"> 
 
</form>