使用最接近时，jQuery无法获取输入字段的值

Question

当我单击类loadKey的链接时，我试图使用keyHash类keyHash输入字段的值。 但是，我一直得到的是undefined吗？

怎么做？ 这不行吗？

小提琴

<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>

$('.loadKey').live('click', function() {

    alert($(this).closest('.keyHash').val());

});

Answer 1

通过最接近的文档，它仅检查当前元素，然后检查其祖先，在您的情况下，输入字段不是祖先，它是兄弟

http://api.jquery.com/closest/

您不能仅使用最接近的方法来实现

Answer 2

您可以使用prev()方法：

 $('.loadKey').on('click', function() { alert($(this).prev('.keyHash').val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accounts hash"> <input type="text" class="input-tiny keyHash"> <i class="icon-plus loadKey">Click</i> </div> 

旁注：不推荐使用live()方法，而推荐使用jQuery 1.7中的.on()

旁注： .on()方法用于绑定jQuery 1.7中的所有事件处理程序。 .on() .click()方法内部使用.on() ，它只是.on()的别名。 使用.click()只是开销。

Answer 3

根据.closest() docs ，对于集合中的每个元素，通过测试元素本身并遍历其在DOM树中的祖先 ，获得与选择器匹配的第一个元素，但此处输入类class input-tiny和keyHash不是祖先 ，但其兄弟则在这种情况下，试试下面的答案。

尝试使用.siblings() ，如下所示：

$('.loadKey').click(function() {
    alert($(this).siblings('.input-tiny.keyHash').val());
});

演示

根据你的HTML结构.siblings()如上图所示将工作得很好，但如果你有类投入很小，keyHash其它元件，其兄弟姐妹.loadKey然后尝试:last选择：

$('.loadKey').click(function() {
   alert( $(this).siblings('.input-tiny.keyHash:last').val() );
});

演示

要么

使用.prev() ，如下所示：

$('.loadKey').click(function() {
    alert($(this).prev('.keyHash').val());
});

演示

要么

将.prevAll()与:first选择器一起使用，如下所示：

$('.loadKey').click(function() {
   alert( $(this).prevAll('input:text[class="input-tiny keyHash"]:first').val() );
});

演示

要么

使用.parent() ，如下所示：

$('.loadKey').click(function() {
   alert( $(this).parent().children('input:text[class="input-tiny keyHash"]').val())
});

演示

不要使用.live()的deprecated since jquery version 1.7 （参见这里 ），而不是使用.on()如下所示：

$(document).on('click','.loadKey',function() {
    alert($(this).prev('.keyHash').val());
});

注意：-上面显示的.on() （ 事件委托 ）示例仅在使用jquery在DOM内部动态添加html时使用。

Answer 4

你为什么不尝试FIDDLE

 $('.loadKey').on('click', function () {

      alert($(this).parent().find('.keyHash').val());

});

Answer 5

$（'。loadKey'）。click（function（）{

alert($(this).prev().val());

}）;

要么

$（'。loadKey'）。click（function（）{

alert($(this).prev('.keyHash').val());

}）;

Answer 6

这也对我有用http://jsfiddle.net/v25kt10r/9/

<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>
$('.loadKey').click(function() {

    alert($('.keyHash').val());

});

要么

$('.loadKey').click(function() {

    alert($('.input-tiny').val());

});