JQuery нагрузки больше функции

Question

Я создал функцию нагрузки более с помощью JQuery и помещается во внешнем файле с именем main.js вот что я создал

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

Хотя он работает нормально, но с 1 только как данные комментариев является более 1 как

<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> 

Первый работает, но он не работает с второй может кто-нибудь помочь мне, почему это происходит?

Answer 1

У вас не может быть более одного элемента с одним идентификатором. изменить его на:

$(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>