選擇從「價值」到「價值」

Question

我有這個

<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
<div class="item">5</div> 
<div class="item">6</div> 
<div class="item">7</div> 
<div class="item">8</div> 

，我想從項目項選擇幷包裝成一個UL，並選擇到並將它們包裝在另一箇中。

<ul> 
     <div class="item">1</div> 
     <div class="item">2</div> 
     <div class="item">3</div> 
     <div class="item">4</div> 
     <div class="item">5</div> 
</ul> 


<ul> 
     <div class="item">6</div> 
     <div class="item">7</div> 
     <div class="item">8</div> 
</ul> 

我該怎麼做？非常感謝

Answer 1

<div>不是<ul>的有效子元素。您應該嵌套<li>元素。至於選擇，你可以使用:gt()和:lt()：

$('div.item:lt(5)').wrapAll("<div>"); 
$('div.item:gt(4)').wrapAll("<div>"); 

Answer 2

像這樣的事情將讓你有...

$('div.item').slice(0, 5).wrapAll('<ul />'); 
$('div.item').slice(5).wrapAll('<ul />'); 

Answer 3

現在，這是遠遠不夠完善，但對於一個開始：

function findByText(n){ 
    return $('.item').filter(function(){return $(this).text() == n}); 
} 

$(function(){ 
    var from = findByText(2); 
    var to = findByText(5); 
    $('.item').slice(from.index(), to.index() + 1).wrapAll('<div />'); 
}); 

它可以在許多方面得到改善 - 你可能要findByText轉換爲過濾器集合的插件，你躍躍欲試要檢查from和to，並且可能只撥打$('.item')一次。
我認爲這足以讓你走了。

工作例如：http://jsbin.com/ehite4/

Answer 4

在這裏創建有效 HTML你需要用它們作爲列表項的很好，能得到這樣的結果：

<ul> 
    <li><div class="item">1</div></li> 
    <li><div class="item">2</div></li> 
    <li><div class="item">3</div></li> 
    <li><div class="item">4</div></li> 
    <li><div class="item">5</div></li> 
</ul> 
<ul> 
    <li><div class="item">6</div></li> 
    <li><div class="item">7</div></li> 
    <li><div class="item">8</div></li> 
</ul> 

這裏是jQuery的，會做的是包裝/分組每5個元素，其餘的在最後，它將適用於您擁有的任意數量的div：

var elems = $("div.item"); 
for(var i = 0; i < elems.length; i+=5) { 
    elems.slice(i, i+5).wrap('<li></li>').parent().wrapAll("<ul></ul>"); 
}​ 

You can see a working demo here，這.wrap() s 每個元素在<li>然後使用.wrapAll()在<ul>包裝組。