javascript - 在 jQuery 中，如何在嵌套循环中获取下一个选择器？

Question

我有以下结构：

<div class="foo">
     <div class="moo">
            <div class="too"> <input type="hidden" val="56"/></div>
     </div>       
</div>
<div class="foo">
     <div class="moo">
            <div class="too">  <input type="hidden" val="58"/></div>
     </div>       
</div>

继续...

//jQuery Code
$('.too').live('click',function(){
  var next_value = $(this).next('.too').find('input').val();
  console.log(next_value);
});

现在我想要下一个“太”输入的值。我怎样才能得到这个？它不工作。

Answer 1

你的问题是.next()遍历兄弟元素。一种方法是爬上 DOM 树，然后再下来。例如：

$('.foo').on('click', '.too', function () {
  var next_value = $(this).closest('.foo').next().find('input').val();
});

另外，你应该尽量避免.live()。如果您使用的是 jQuery 1.7+，您会想要使用.on()（如我的示例所示）。如果您使用的是 1.7 之前的版本，请尝试使用.delegate()或.bind().

Answer 2

首先，不要使用.live. 使用事件委托。

其次，.next只适用于兄弟姐妹。您可以通过多种方式获取下一个兄弟姐妹——假设.foo/.too结构对文档是唯一的，您可以使用以下内容：

var next_value = $(".too").eq($('.too').index(this) + 1);

Answer 3

$('.too').live('click',function(){
  var next_value = $(this).parent('.foo').next().find('input').val();
  console.log(next_value);
});

顺便说一句，我认为你应该放弃.live()。