Question

我的javascript代码是这样的：

$(document).ready(function () {
    $('#myList li:lt(3)').show();
    var items =  $('ul#myList li').length
    var shown =  3;

    if(items <= 3)
         $('#loadMore').hide();

    $('#loadMore').click(function () {
        shown = $('#myList li:visible').length+5;
        if(shown < items) {
            $('#myList li:lt('+shown+')').show();
        }
        else {
            $('#myList li:lt('+items+')').show();
            $('#loadMore').hide();
        }
    });
});

演示和完整代码如下：http://jsfiddle.net/oscar11/nFd7C/1085/

执行代码时，它将显示：

一个

两个

三

首先显示三个项目

但是我想要最后三个项目

所以我想要这样的结果：

二十三

二十四

二十五

我该怎么做？

Answer 1

您可以使用.slice()和参数-3来选择jQuery对象的最后三个元素;

$("#myList li").slice(-3).show();

Answer 2

使用slice

＆＃13;

   $(document).ready(function() {
  var slice = -3;
  $('#myList li').slice(slice).show();
  var items = $('ul#myList li').length
  var shown = 3;

  if (items <= 3)
$('#loadMore').hide();

  $('#loadMore').click(function() {
slice = slice - 5;
if (shown < items) {
  $('#myList li').slice(slice).show();
  if ($('ul#myList li:visible').length == items)
    $('#loadMore').hide();
}
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您使用以下内容;

$('#myList li:gt(-4)').show();

它将显示最后三个孩子。

http://jsfiddle.net/nFd7C/1086/

它有点像逻辑，但有效。

Answer 4

解决这个问题的最佳方法是在将显示的项目限制为3之前使用jQuery反转列表：

$('ul > li').each(function() {
  $(this).prependTo(this.parentNode);
});

＆＃13;

$(document).ready(function() {

  $('ul > li').each(function() {
    $(this).prependTo(this.parentNode);
  });

  $('#myList li:lt(3)').show();
  var items = $('ul#myList li').length
  var shown = 3;

  if (items <= 3)
    $('#loadMore').hide();

  $('#loadMore').click(function() {
    shown = $('#myList li:visible').length + 5;
    if (shown < items) {
      $('#myList li:lt(' + shown + ')').show();
    } else {
      $('#myList li:lt(' + items + ')').show();
      $('#loadMore').hide();
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

这样当你点击“加载更多”时，你就可以正确地反转这些元素，直到你到达第一个元素：）

我还创造了一个演示这个here的小提琴。

Answer 5

你可以使用＆＃34; GT＆＃34;而在你的选择器中，就像这样......

$(document).ready(function () {
  var items =  $('ul#myList li').length;
  var shown = 3;
  var start = items-shown-2; //account for 0-indezing
  $('#myList li:gt('+start+')').show();
//.....

Answer 6

只能选择最后三项：gt（-4）

示例

$(document).ready(function(){ $("tr:gt(-4)").css("background-color", "yellow"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Welcome to My Web Page</h1> <table border="1"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> </table>

我在找到这个选择器时修改了https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_gt。

如何在jquery上显示列表中的最后一个li？

6 个答案: