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＆＃39; Serverless Machine Learning with Tensorflow来抓取第一个n项。

如果我们将该选择范围缩小到:lt(n) selector元素，则每次都会逐步显示下一个n元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

jQuery有.slice( start [, end ] )

$('#parent').children('li').slice(3, 6).show();

Answer 3

你可以这样做：

＆＃13;

//show first 3
$("#parent").children("li").slice(0, 3).show();
$("a").on("click", function() {
  // grab 4th li
  var clicked = $("li:nth-child(4)").is(":visible");
  //check if visible
  if (clicked) {
    // if it is, show last 3
    $("li").slice(6, 9).show();
  } else {
    //if not, show second 3
    $("li").slice(3, 6).show();
  }
})

＆＃13;

#parent li {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="parent">
  <li> 1st record </li>
  <li> 2nd record </li>
  <li> 3rd record </li>
  <li> 4th record </li>
  <li> 5th record </li>
  <li> 6th record </li>
  <li> 7th record </li>
  <li> 8th record </li>
  <li> 9th record </li>
</ul>
<a href="#"> Load More</a>

＆＃13;

有没有办法让孩子从某个索引到jquery中的某个索引

3 个答案: