JQuery Несколько скрытых значений

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()) 
}) 

Вы должны использовать $(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); 
})