Question

我有以下HTML;

<ul class="list-group">
<li class="list-group-item">
  www.andrewspiers.co.uk        
  <input type="hidden" name="url" value="www.andrewspiers.co.uk">
</li>
<li class="list-group-item">
  wikipedia.org        
  <input type="hidden" name="url" value="wikipedia.org">
</li>
</ul>

计划是为每一行添加一个按钮，然后在单击按钮时从隐藏字段中获取值。

我有这个;

alert( $('input[name="url"]').val() );

但无论点击哪个按钮，都会返回第一行的值。

Answer 1

这应该有效：

$('button').click(function(){
    console.log($(this).closest('li').find('input[name="url"]').val())
})

您需要在click函数中使用$(this)来引用该特定元素，然后相应地遍历DOM（多种方法可以在此处对猫进行换肤）以获取隐藏的输入。

<强> jsFiddle example

Answer 2

假设您的按钮位于同一li内，则需要更具体的选择器：

alert( $(this).siblings('input[name="url"]').val() );

Answer 3

您可以添加如下按钮：

 $('.list-group-item').each(function(){
   $(this).append('<input class="clicked" type="button" value="Click me"/>')
 })

然后你可以根据这样的按钮得到每个隐藏的值：

 $('.clicked').on('click',function(){
  var hiddenval =$(this).parent().find('input[name="url"]').val();
  console.log(hiddenval);
 })

JQuery多个隐藏值

3 个答案: