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

时间:2012-09-04 07:31:00

标签: ajax jquery

我没有做过很多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条记录...... 干杯

2 个答案:

答案 0 :(得分:1)

使用:lt()-selector

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

答案 1 :(得分:0)

将一个类添加到targeted.html文件中的最后5个元素:

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