Question

当我点击类keyHash的链接时，我尝试使用类loadKey获取输入字段的值。但是，我所得到的只是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()方法：

＆＃13;

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

＆＃13;

<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>

＆＃13;

附注：不推荐live()方法支持jQuery 1.7中的.on()

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

Answer 3

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

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

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

DEMO

根据您的html结构，上面显示的.siblings()工作正常，但如果您有其他元素 class input-tiny和keyHash ，它们是.loadKey的兄弟，请尝试:last选择器：

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

DEMO

或

如下所示使用.prev()：

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

DEMO

或

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

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

DEMO

或

如下所示使用.parent()：

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

DEMO

请勿使用.live()其deprecated since jquery version 1.7（请参阅here），而是使用.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

$（＆＃39; .loadKey＆＃39;）。点击（function（）{

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

}）;

OR

$（＆＃39; .loadKey＆＃39;）。点击（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()); });

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

6 个答案: