ajax - 使用 jQuery AJAX 定位特定无序列表时如何选择最后 5 个列表项？

Question

我还没有做太多 jQuery AJAX 的东西，只是开始学习加载功能，这对于我需要的东西来说绝对是惊人的......但我的问题现在更具体关于我如何可能只选择最后 5 条记录/列表项针对特定列表项时...

例如;

页面名称：targeted.html

  <div id="targeted_div">
  <ul>
  <li>Want to select this list item</li>
  <li>Want to select this list item</li>
  <li>Want to select this list item</li>
  <li>Want to select this list item</li>
  <li>Want to select this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  <li>Do NOT want this list item</li>
  </ul>
  </div>

页面名称：new.html

<div id="new_div">
</div>

我通常会选择整个无序列表，例如；

<script>
$('#new_div').load('/targeted.html #targeted_div');
</script>

那么如何做到这一点，在此先感谢 :) 也可以从下到上选择最后 5 条记录...干杯

Answer 1

使用:lt()-selector

$('<ul/>')
 .appendTo($('#new_div').empty())
   .load('/targeted.html #targeted_div li:lt(5)');

Answer 2

向文件中的最后 5 个元素添加一个类targeted.html：

<div id="targeted_div">
  <ul>
    <li class='selectMe'>Want to select this list item</li>
    <li class='selectMe'>Want to select this list item</li>
    <li class='selectMe'>Want to select this list item</li>
    <li class='selectMe'>Want to select this list item</li>
    <li class='selectMe'>Want to select this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
    <li>Do NOT want this list item</li>
  </ul>
</div>

然后，在new.html运行中：

<script>
   //get only $('.selectMe') elements from targeted.html contents
   var loadedCode = $.load('/targeted.html .selectMe');

   //construct new code
   var newCode = '<ul>'+loadedCode+'</ul>';

   //insert new code into #newDiv
   $('#newDiv').html(newCode);

   //reorder <li> elements
   var ul = $("ul");
   var li = ul.children("li");
   li.detach().sort();
   ul.append(li);
</script>