javascript - 有没有办法让 child 从 jquery 中的某个索引到某个索引

Question

我里面有一些记录<ul> .喜欢

<ul id="parent">
    <li> 1st record </li>
    <li> 2nd record </li>
    <li> 3rd record </li>
    <li> 4th record </li>
    // and so on
</ul>
<a href="#" id="loadMore"> Load More</a> 

最初我只向用户显示了 3 个 li 元素，现在我必须在每次加载更多点击时再显示 3 个元素。所以我看起来像 $('parent').children('li',3,6).show();我已经在第一次 ajax Call 时加载了所有数据，但在第一页加载时只显示了 3 个数据。

Answer 1

您可以利用 jQuery 的 :lt(n) selector ，它会抓取前 n 个项目。

如果我们将选择范围缩小到 :hidden元素，每次都会增量显示下一个 n 元素。

let resultsPerClick = 3;

$("#loadMore").click(function() {
  $("#parent li:hidden:lt(" + resultsPerClick + ")").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="loadMore" Value="Load More" />

<ul id="parent">
    <li> 1st record </li>
    <li> 2nd record </li>
    <li> 3rd record </li>
    <li style="display: none;"> 4th record </li>
    <li style="display: none;"> 5 record </li>
    <li style="display: none;"> 6 record </li>
    <li style="display: none;"> 7 record </li>
    <li style="display: none;"> 8 record </li>
    <li style="display: none;"> 9 record </li>
    <li style="display: none;"> 10 record </li>
    <li style="display: none;"> 11 record </li>
    <li style="display: none;"> 12 record </li>
</ul>

$("#parent li:hidden")        //Grabs all of the hidden <li> elements
$("#parent li:lt(3)")         //Grabs the first three <li> elements
                              //Combine them...
$("#parent li:hidden:lt(3)")  //Grabs the first three hidden <li> elements