如何使用jQuery來包裝每一組物品？

我想將<h2>和<table>的每一套都包裝在它們自己的<div>之內，這樣我就可以使用CSS來操縱新的容器。如何使用jQuery來包裝每一組物品？

下面是我一起工作的HTML的一個簡化版本：

<div> 
<h3></h3> 
<h2 class="product-line-term-name">Product 1</h2> 
<table class="views-view-grid"></table> 
<h3></h3> 
<h2 class="product-line-term-name">Product 2</h2> 
<table class="views-view-grid"></table> 
<h3></h3> 
<h2 class="product-line-term-name">Product 3</h2> 
<table class="views-view-grid"></table> 
</div>

注：我只在主題層上工作，所以的jQuery（1.3.2版本）和CSS是我的工具。

來源

2013-03-18 JCL

爲什麼你不能只是操縱標籤是用css？ – lukeocom 2013-03-18 06:33:54

看看這段代碼

jQuery.each($('.product-line-term-name'), function(i, val) { 
    //Create new element 
    var div = "<div>" + $(this)[0].outerHTML + $(this).next()[0].outerHTML + "</div>"; 

    $(this).prev().after(div); 
    $(this).next().remove(); 
    $(this).remove(); 
});

See fiddle

來源

2013-03-18 06:43:42 Silagy

這爲我在當前安裝在網站上的jQuery（1.3.2）版本工作。 – JCL 2013-03-18 07:25:59

您可以使用nextUntil和wrapAll在這種情況下：

$('h3').each(function(){ 
    $(this).nextUntil('h3').wrapAll('<div class="example" />'); 
});

演示：http://jsfiddle.net/9w9Sp/

來源

2013-03-18 06:33:13 Eli

這將工作很好，但我只是意識到該網站正在運行jQuery 1.3.2和.nextUntil被添加到1.4 – JCL 2013-03-18 06:39:54

然後，我建議你升級你的版本，因爲1.3.2是相當古老，可能缺乏很多有用的功能 – Eli 2013-03-18 06:42:38

我認爲以下代碼將發揮作用你的目的爲jQuery 1.3.2：

var h3_length = $('h3').length; 

for(var i= h3_length - 1; i>= 0; i--) { 
    $('h3').eq(i).nextAll().not(".test, h3").wrapAll('<div class="test" />'); 
}

來源

2013-03-29 06:41:12

如何使用jQuery來包裝每一組物品？

回答

相關問題