內附項目集合在jQuery的

-1

可能重複：
jquery to wrap elements 內附項目集合在jQuery的

我有這樣一組跨度：

<span class="i1"><img src="image-1.jpg" alt="image-1" /></span> 
<span class="i2"><img src="image-2.jpg" alt="image-2" /></span> 
<span class="i3"><img src="image-3.jpg" alt="image-3" /></span> 
<span class="i4"><img src="image-4.jpg" alt="image-4" /></span> 
<span class="i5"><img src="image-5.jpg" alt="image-5" /></span> 
<span class="i6"><img src="image-6.jpg" alt="image-6" /></span> 
<span class="i7"><img src="image-7.jpg" alt="image-7" /></span>   
<span class="i8"><img src="image-8.jpg" alt="image-8" /></span> 
...

我想包圍第一（讓我們說）7，然後是下一個7，然後是下一個7，等等。我怎麼做？

來源

2012-01-11 Johnny

這是近一個重複的，但可能這一個更好的措辭和標題。 – Alnitak 2012-01-11 16:15:13

我的不好。我甚至沒有注意到這一點。另一個問題的答案與這裏的問題不太一樣。 – Johnny 2012-01-12 19:59:43

使用切片：

例如，

var slices = $("span"); 
for(var i = 0; i < slices .length; i+=7) { 
    slices .slice(i, i+7).wrapAll("<div class='wrapper'></div>"); 
}

jsFiddle here

來源

2012-01-11 17:00:21 areid

與我已有的代碼完美整合！非常感謝：] – Johnny 2012-01-11 17:20:40

下面的代碼可能不是最優雅的，但它的工作原理。

$(document).ready(function() { 
    var $i = 0; 
    var $j = 0; 
    $('span').each(function(){ 

     $(this).addClass('inner-' + $j); 

     if (++$i % 7 == 0) 
     { 
      $i == 0; 
      $j++; 
     } 
    }); 

    var $l = $('span').length; 
    var $j = $l/7; 

    if ($l % 7 > 0) 
    { 
     $j++; 
    } 
    for (var $t = 0; $t <= $l; $t++) 
    { 
     $('.inner-' + $t).wrapAll('<div>'); 
    } 

});

參見：http://jsfiddle.net/u8RQ4/7/

來源

2012-01-11 13:50:26

我相信這可以做得更短... – Alnitak 2012-01-11 15:40:06

我是對的 - **多**更短:) – Alnitak 2012-01-11 16:07:26

因此免責聲明：「下面的代碼不是最優雅的，但它的工作原理」。 – 2012-01-11 16:09:27

編輯

我建議以下方法，如果你是好改變你的DOM結構 - 包裝所有的跨度在一個div，像這樣：

<div id='my_id'> 
    <span class='i1'>...... 
    <span class='i2'>...... 
</div>

現在試試這個：

i=0; 
data = '<div>'; 
$("span").each(function() 
{ 
    i++; 
    data += $('<div>').append($(this).clone()).remove().html(); //This gives the html of the span element- creating a dummy div wrapper around the span and getting the html, then removing the dummy div wrapper 
    if (i%7 == 0) data += '</div><div>'; 
} 
if (i%7 == 0) data = data.splice(0, -5); //If the number of span elements is a multiple of 7 then this remove the trailing '</div>' 
else data += '</div>'; 
$('#my_id').html(data); //replaces div#my_id contents with the new html

來源

2012-01-11 14:02:11 Ninja

這是我最初嘗試過的，但所有這些都是在每個集合7. – Johnny 2012-01-11 14:36:31

之前和之後添加

並不令人驚訝，因爲您不能將不完整的元素插入到DOM中...... – Alnitak 2012-01-11 15:39:13

我知道。我只是指出它沒有奏效。 – Johnny 2012-01-11 15:45:45

把你的元素在一個共同的容器元素，然後使用此：

var $c = $('#container'); 
while ($c.children('span').length) { 
    $c.children('span:lt(7)').wrapAll('<div>'); 
}

工作演示在http://jsfiddle.net/alnitak/sppgP/

注意：使用:lt()選擇的意思是span元素必須是第一容器中的東西 - 散佈的其他元素將導致:lt()計算失敗。

來源

2012-01-11 16:06:23 Alnitak

內附項目集合在jQuery的

回答

相關問題