Reveal Все элементы списка - с помощью jQuery

Question

Я работаю над простым фрагментом кода, чтобы скрыть, а затем отобразить элементы списка.

В настоящее время у меня есть работа, поэтому она открывается каждый раз, когда я нажимаю Load more. Он загружает его партиями по 5, однако я хотел бы раскрыть все элементы списка в неупорядоченном списке, когда я нажимаю Load more.

Как достичь этого с помощью моего текущего кода?

Демо:http://jsfiddle.net/jtg7n4wj/

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

#myList li{ display:none; 
 
} 
 
#loadMore { 
 
    color:green; 
 
    cursor:pointer; 
 
} 
 
#loadMore:hover { 
 
    color:black; 
 
} 
 
#showLess { 
 
    color:red; 
 
    cursor:pointer; 
 
    display:none; 
 
} 
 
#showLess:hover { 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
    <li>Thirteen</li> 
 
    <li>Fourteen</li> 
 
    <li>Fifteen</li> 
 
    <li>Sixteen</li> 
 
    <li>Seventeen</li> 
 
    <li>Eighteen</li> 
 
    <li>Nineteen</li> 
 
    <li>Twenty one</li> 
 
    <li>Twenty two</li> 
 
    <li>Twenty three</li> 
 
    <li>Twenty four</li> 
 
    <li>Twenty five</li> 
 
</ul> 
 
<div id="loadMore">Load more</div> 
 
<div id="showLess">Show less</div>

Answer 1

Используйте этот

size_li = $("#myList li").size(); 
    x = 3; 
    $('#myList li:lt(' + x + ')').show(); 
    $('#loadMore').click(function() { 
    $('#myList li,#showLess').show(); 
    $('#loadMore').hide(); 
    }); 
    $('#showLess').click(function() { 
    $('#myList li:gt(' + x + '),#showLess').hide(); 
    $('#loadMore').show(); 
    }); 

http://jsfiddle.net/5y002xzc/

Answer 2

Обновленный код

Вы можете использовать gt и lt в определенных пределах литиево для показа и скрытия

$(document).ready(function() { 
 
    size_li = $("#myList li").size(); 
 
    x=3; 
 
    $('#myList li:lt('+x+')').show(); 
 
    $('#loadMore').click(function() { 
 
     $('#loadMore').hide(); 
 
     $('#showLess').show(); 
 
     $('#myList li:gt(3)').show(); 
 
    }); 
 
    $('#showLess').click(function() { 
 
     $('#loadMore').show(); 
 
     $('#showLess').hide(); 
 
     $('#myList li:gt(3)').hide(); 
 
    }); 
 
});

#myList li{ display:none; 
 
} 
 
#loadMore { 
 
    color:green; 
 
    cursor:pointer; 
 
} 
 
#loadMore:hover { 
 
    color:black; 
 
} 
 
#showLess { 
 
    color:red; 
 
    cursor:pointer; 
 
    display:none; 
 
} 
 
#showLess:hover { 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
    <li>Thirteen</li> 
 
    <li>Fourteen</li> 
 
    <li>Fifteen</li> 
 
    <li>Sixteen</li> 
 
    <li>Seventeen</li> 
 
    <li>Eighteen</li> 
 
    <li>Nineteen</li> 
 
    <li>Twenty one</li> 
 
    <li>Twenty two</li> 
 
    <li>Twenty three</li> 
 
    <li>Twenty four</li> 
 
    <li>Twenty five</li> 
 
</ul> 
 
<div id="loadMore">Load more</div> 
 
<div id="showLess">Show less</div>