jquery Last mehr Funktion

Question

Ich habe eine Funktion der Last mehr mit Jquery und platziert in einer externen Datei mit dem Namen main.js hier erstellt ist, was ich

$(document).ready(function() { 
    size_li = $("#comment_list li").size(); 
    x=2; 
    $('#comment_list li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $('#comment_list li:lt('+x+')').show(); 
    }); 
    $('#showLess').click(function() { 
     x=(x-5<0) ? 2 : x-5; 
     $('#comment_list li').not(':lt('+x+')').hide(); 
    }); 
}); 

erstellt habe Obwohl es gut funktioniert, aber mit 1 nur als die Daten der Kommentare sind mehr als 1 wie

<ul class="comment_response" id="comment_list"> 
    <li></li> 
</ul> 

<div id="loadMore">Load more</div> 

<ul class="comment_response" id="comment_list"> 
    <li></li> 
</ul> 

<div id="loadMore">Load more</div> 

die erste Arbeit, aber es ist nicht mit zweitem Arbeits kann mir jemand helfen, warum dies geschieht?

Answer 1

Sie können nicht mehr als ein Element mit einer ID haben. ändern Sie es zu:

$(document).ready(function() { 
    size_li = $(".comment_list li").size(); 
    x=2; 
    $(this).previous().find('li:lt('+x+')').show(); 
    $('.loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $(this).previous().find('li:lt('+x+')').show(); 
    }); 
    $('.showLess').click(function() { 
     x=(x-5<0) ? 2 : x-5; 
     $(this).previous().find('li').not(':lt('+x+')').hide(); 
    }); 
}); 

HTML:

<ul class="comment_response comment_list> 
    <li></li> 
</ul> 

<div class="loadMore">Load more</div> 

<ul class="comment_response comment_list> 
    <li></li> 
</ul> 

<div class="loadMore">Load more</div>