包裝後如何添加div標籤使用jQuery

我想改變以下，

<div id="system"> 
    <div id="product_cont img"> 
     <img src="image1.jpg" /> 
     <img src="image2.jpg" /> 
     <img src="image3.jpg" /> 
.. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.  
Pellentesque in lacus et augue malesuad. 
    </div> 
</div>

喜歡這個。

<div id="system"> 
    <div id="product_cont img"> 
     <ul class="cont_thumb"> 
     <li><img src="image1.jpg" /></li> 
     <li><img src="image2.jpg" /></li> 
     <li><img src="image3.jpg" /></li> 
     ... 
     </ul> 
     <div style="clear:both;"></div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.  
Pellentesque in lacus et augue malesuad 
    </div> 
</div>

當我使用我可以<li>和<ul>包裹的圖像以下。

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>");

但我不知道如何將</ul>標籤使用jQuery後補充一點：

<div style="clear:both;"></div>

我想這一點，但沒有奏效：

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>").after('<div style="clear:both;"></div>');

任何人都可以請幫幫我？在此先感謝。

來源

2010-09-05 shin

如果您<li>元素是浮動的，你可以把這個在你的CSS（而不是並稱<div>）：

#cont_thumb { overflow: auto; }

所以它會找出自己的時候在他們的身高因素。 Quirksmode.org有a pretty good article on alternative approaches to clearing floats here。另外id="product_cont img"即使在HTML5中也是無效的，您應該使用不包含空格的ID來避免副作用和CSS選擇器痛苦。

編輯的評論：如果你縮放和需要一個完整清晰的（和overflow: none也不符合該法案），你可以這樣做：

$("#system #product_cont img").wrapAll('<ul class="cont_thumb">').wrap('<li />') 
         .closest('ul').after('<div style="clear:both;"></div>');

來源

2010-09-05 12:29:28

它清除。不過，我正在放大圖像，因此它會在右側和底部創建不必要的滾動條。 – shin 2010-09-05 12:44:49

@shin - 在那種情況下，'$（「。cont_thumb」）。（'

'）之後''在你現在擁有的東西應該工作之後。或者，在（'

'）之後加上'.closest（'ul'）;'結尾。 – 2010-09-05 12:50:05

$("#system #product_cont img").append('<div style="clear:both;'></div>")應該足夠了。

來源

2010-09-05 12:28:23 Zafer

這在末尾添加DIV #product_cont div。我在ul標籤後需要它。之前的話，lorm等 – shin 2010-09-05 12:47:14

包裝後如何添加div標籤使用jQuery

回答

相關問題