裹成對的元素？

如果你有下面的代碼：裹成對的元素？

<div class="parent"> 

    <div class="1a"></div> 
    <div class="1b"></div> 

    <div class="2a"></div> 
    <div class="2b"></div> 

    <div class="3a"></div> 
    <div class="3b"></div> 


</div>

是否有一個有效的/簡單的方法來環繞每一個新的DIV + B所以它完成這樣看：

<div class="parent"> 

    <div class="new-1">   
     <div class="1a"></div> 
     <div class="1b"></div> 
    </div> 

    <div class="new-2">   
     <div class="2a"></div> 
     <div class="2b"></div> 
    </div> 

    <div class="new-3">   
     <div class="3a"></div> 
     <div class="3b"></div> 
    </div> 


</div>

比如可以我這樣說：

包裹每兩個內部.parent的div <div class="new-(incremental variable)"></div>（新包裝的div需要有一個獨特的類）

來源

2013-07-01 user2413333

原始的div是否生成？要做的最好的事情就是在那個時候生成周圍的div。如果它們是靜態的，你也應該靜態編碼周圍的div。您還應該考慮在子元素上使用較少特定的類名稱。例如。 'class =「a」'和'class =「b」'是可重用的 - 不需要在它們前面有一個數字，因爲它們不需要是唯一的。如果您需要每個組的樣式不同，則可以使用父節點進行更具體的選擇。例如。 'new-3 a'和'new-3 b'，但即使是那些父節點也是相當具體的類。 – Corion

喜歡這個？

$('.parent > div:odd').each(function(i){ 
    $(this) 
     .prev() 
     .addBack() 
     .wrapAll($('<div/>',{'class': 'new-' + (i+1)})); 
});

Demo

獲取所選擇的奇數級即1，3，5等基於索引（0類）;迭代odd者的prev元件相對於奇數（需要被配對）獲得，使用 ~~andSelf~~ addBack以選擇過，然後使用wrapAll在所述一對。

如果你想忽略他們的第一個x

然後做到這一點：

$('.parent > div:gt(' + (x-1) + '):odd').each(function(i){ 
    $(this) 
     .prev() 
     .addBack() 
     .wrapAll($('<div/>',{'class': 'new-' + (i+1)})); 
})

Demo

來源

2013-07-01 22:10:17 PSL

絕對真棒。非常感謝。（刪除其他問題，解決它和工作perfecto） – user2413333

非常感謝再次:) – user2413333

@ user2413333看到我的答案更新。不用謝。 – PSL

你可以從字面上使用jQueries環繞功能。看看這裏！

http://api.jquery.com/wrap/

來源

2013-07-01 22:10:57

我不知道你想用新的包裝的div但是在CSS第n個孩子來實現可能是有用的。嘗試這樣的：

div.parent div {width:50%;} 
div.parent div:nth-child(odd) {clear:both; float:left;} 
div.parent div:nth-child(even) {float:right;}

...這將給你並排的div對。

來源

2013-07-01 22:25:09 user2540562

裹成對的元素？

回答

相關問題