如何用 jQuery 包装每组两个项目？答案

【问题标题】：How do I wrap each set of two items with jQuery?如何用 jQuery 包装每组两个项目？
【发布时间】：2013-03-18 06:11:21
【问题描述】：

我想将每组 <h2> 和 <table> 包装在它们自己的 <div> 中，以便我可以使用 CSS 操作新容器。

以下是我正在使用的 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 是我的工具。

【问题讨论】：

为什么不能像使用 css 一样操作标签？

标签： jquery drupal-6 jquery-1.3

【解决方案1】：

在这种情况下，您可以使用nextUntil 和wrapAll：

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

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

【讨论】：

这很好用，但我刚刚意识到该站点正在运行 jQuery 1.3.2 并且 .nextUntil 是在 1.4 中添加的
那么我建议你升级你的版本，因为 1.3.2 已经很老了，可能缺少很多有用的功能

【解决方案2】：

看看这段代码

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

【讨论】：

这适用于我目前安装在网站上的 jQuery (1.3.2) 版本。

【解决方案3】：

我认为以下代码将满足您的 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" />');
}

【讨论】：