Селектор jquery в селекторе

Question

Я использовал JQuery, но я все еще участвую. То, что я пытаюсь сделать, это иметь список PHP (в конечном итоге около 20 элементов), но мне нужно показать только то, что нужно пользователю. То, что я хочу сделать, это добавить кнопку в конце, которая показывает следующий раздел.

Это то, что я до сих пор:

<script src="jquery-1.11.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.list').hide(); 
    $('#first').show(); 

    $('.list').click(function(){ 
     $(this).next('.list').show(); 

    }); 
}); 





</script> 

<?php 

echo "<div class='list' id='first'>First<button class='buttonlist'>Show Next</button></div> 
<div class='list'>Second <button class='buttonlist'>Show Next</button></div> 
<div class='list'>Third <button class='buttonlist'>Show Next</button></div> 
<div class='list'>Fourth<button class='buttonlist'>Show Next</button></div> 

    "; 
?> 

Это в настоящее время работает, однако, если поле ввода добавляется затем в следующем разделе показано, когда выбран этот вход. Как я могу сделать это, чтобы пользователь мог нажать на кнопку, а следующий появится? Я знаю, что PHP здесь не нужен, но когда я закончу, это будет сделано с использованием цикла.

Answer 1

Изменить этот

$('.list').click(function(){ 
    $(this).next('.list').show(); 

}); 

в

$('.buttonlist').click(function() { 
    $(this).parent().next('.list').show(); 
});