使用jQuery从邻居输入元素获取值

Question

单击标志时，我试图获取INPUT字段的当前值。

HTML：

<li>
<ul>        
<li class="name">Name:</li>
<li><a spc_action="minus" class="ignite_form_counter fas fa-minus-circle"></a></li>
<li><input type="text" name="count_cat_2_x" value="0"></li>
<li><a spc_action="plus" class="ignite_form_counter fas fa-plus-circle"></a></li>
</ul>
</li>

JS：

$('li').delegate('.ignite_form_counter', 'click', function(){       
    console.log( $(this).parent().parent('li').closest('input').val() );    
    return false;
});

我已经尝试了上面的方法，但是没有用。

最好不要使用closest因为我想100％确定我得到正确的值。

任何建议如何做到这一点？

Answer 1

首先， delegate已被弃用。 您应该改用on()方法的委托签名。 还值得检查您的jQuery版本是否最新。 理想情况下，如果需要旧版IE支持，则应该使用3.3.1或1.12.1。 其次， closest()用于提升 DOM，而不是下降。 这样，您可以将其与find()调用耦合以执行所需的操作：

 $(document).on('click', '.ignite_form_counter', function(e) { e.preventDefault(); var value = $(this).closest('ul').find('input').val() console.log(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <ul> <li class="name">Name:</li> <li> <a spc_action="minus" class="ignite_form_counter fas fa-minus-circle">-</a> </li> <li><input type="text" name="count_cat_2_x" value="0"></li> <li> <a spc_action="plus" class="ignite_form_counter fas fa-plus-circle">+</a> </li> </ul> </li> </ul> 

请注意， on()调用是在document上进行的。 像以前一样使用li会将事件附加到DOM中的每个 li并最终重复多次。 您可以通过使用更紧密的静态单父元素（可能在页面加载时在DOM中使用该元素）来改善此问题，但是HTML并未显示此示例。

Answer 2

console.log( $(this).parent().next().find("input").val() ); 如果您有带正负号的多个输入，将为您提供帮助。

 $('li').delegate('.ignite_form_counter', 'click', function(){ console.log( $(this).parent().next().find("input").val() ); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <ul> <li class="name">Name:</li> <li><a spc_action="minus" class="ignite_form_counter fas fa-minus-circle">minus</a></li> <li><input type="text" name="count_cat_2_x" value="50"></li> <li><a spc_action="plus" class="ignite_form_counter fas fa-plus-circle">plus</a></li> <li><input type="text" name="count_cat_2_x" value="20"></li> <li><a spc_action="minus" class="ignite_form_counter fas fa-minus-circle">minus</a></li> <li><input type="text" name="count_cat_2_x" value="30"></li> </ul> </li> 

您也可以在这里进行测试。.https ://jsfiddle.net/nimittshah/1gvsc8rh/