jquery - 如何从嵌套在div中的隐藏输入元素中获取文本

Question

我有以下html代码：

<a class="tog" href="#">Click Me</a> 
<div class="result">
    <input type="hidden" name="hid" value="val01" />
    This is a container div
</div> <br />
<a class="tog" href="#">Click Me</a> 
<div class="result">
    <input type="hidden" name="hid" value="val02" />
    This is a another container div
</div>

如何在点击时从隐藏的输入中获取价值<a>？我正在尝试使用此 jquery 代码，但无法从那些隐藏的输入元素中检索值。

$(document).ready(function(){
 $(".tog").click(function(){
   var $this=$(this);
 if (!$this.next(".result").data('loaded')){ 
   alert($this.next("input[name=hid]").val());
  }
 });
});

Answer 1

简单的

$(".tog").click(function () {
    var $this = $(this);
    if (!$this.next(".result").data('loaded')) {
        alert($this.next(".result").children("input:hidden").val());
    }
});

Answer 2

它应该是：

$(document).ready(function () {
  $(".tog").click(function () {
    var $this = $(this);
    if (!$this.next(".result").data('loaded')) {
        alert($this.next().find("input[name=hid]").val());
    }
  });
});

演示

Answer 3

您的代码的问题在于，您正在使用文档中的next()来 获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。. 在这里，您的 '$this' 指向锚点，当您尝试执行$this.next("input[name=hid]").val()它时，没有任何名为“hid”的直接同级，这就是您得到未定义的原因。

试试这个代码：

$(document).ready(function(){
    $(".tog").click(function(){
       var $this=$(this);
    alert($this.next("div").find("input[name=hid]").val());   
     });
});

jsfiddle

Answer 4

您可以执行以下操作：

获取下一个元素，即带有结果类的 div。从那里你可以找到隐藏的输入并获得它的价值。

演示

Javascript：

$(document).ready(function(){
    $(".tog").click(function(){
        var atag = $(this);
        var hiddenInput = atag.next().find('input[type=hidden]');
        alert(hiddenInput.val());         
    });
});