如何使用 jQuery 通过遍历父元素返回子元素来选择某个元素？

Question

我有以下代码。

<div class="container">
     <input type="hidden" name="id" value="123" class="id" />
     <div class="inner">
          <a href="#" class="link">link</a>
     </div>
</div>

所以我试图在单击锚标记时获取隐藏的 id 值。这是我尝试过但不起作用的以下代码。

jQuery("a.link").click(function() {
     var id = jQuery(this).parents(".container").children("input.id").val();
     alert(id);
});

甚至不确定这是否是选择我想要的内容的最佳方式...一些指导将不胜感激。

Answer 1

该隐藏的输入标签是否有效，或者纯粹用于在有人单击您的链接时进行检查？另一种方法是使用 rel 属性将所需的值输出到锚标记本身，并消除隐藏的输入。

让你的 HTML 输出如下：

<div class="container">
     <div class="inner">
          <a href="#" class="link" rel="123">link</a>
     </div>
</div>

那么你的 jQuery 是这样的：

jQuery("a.link").click(function() {
     var id = jQuery(this).attr('rel');
     alert(id);
});

如果 标签不起作用，这也将简化你的 HTML 和 jQuery。

Answer 2

尝试

jQuery(".link").live('click',function() {
     var id = jQuery(this).parents(".container").find(".id").val();
     alert(id);
});

Answer 3

试试这个：

$("a.link").click(function(){
    var value = $(this).parent().siblings(".id").val();
});

如果你想通过输入类型找到它，你可以这样做：

$("a.link").click(function() {
    alert($(this).parent().siblings("input[type='hidden']").val());
});