如何使用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

一類添加到最後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> 

Answer 2

使用:lt()-selector

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