使用jQuery对元素进行分组

Question

我有一堆元素需要分组，但由于这些元素是从某些不可修改的机器中输出的，因此我需要使用jquery（我对其基础比较熟悉）来完成。基本上，我在一个表单元素中有许多松散的p标签和div标签（是的，这是糟糕的标记，但这是另一个故事）。我需要将带有以下一两个div标签的p标签分组到fieldset中。我尝试在每个p元素之前插入fieldset结束标记，然后再插入开始标记，但我猜整理它的机器想要插入合法的元素，所以那行不通。

- chrism

---

你尝试做什么并不是特别清楚。 - gub

好的，让我来澄清一下。我有这样一个东西：p div div p div div p div p div我需要做的是将每个 p 元素与随后的一个或两个 div 归为同一个 fieldset 元素。 - chrism

Answer 1

如果我理解正确，您有一个文档，其中标记看起来像这样：

<p>paragraph 1</p>
<div>par1 div1</div>
<div>par1 div2</div>
<p>paragraph 2</p>
<div>par2 div1</div>
<div>par2 div2</div>
<p>paragraph 3</p>
<div>par3 div1</div>
<p>paragraph 4</p>
<div>par4 div1</div>

您希望最终得到类似于这样的结果：

<fieldset>
 <p>paragraph1</p>
 <div>par1 div1</div>
 <div>par1 div2</div>
</fieldset>
<fieldset>
 <p>paragraph2</p>
 <div>par2 div1</div>
 <div>par2 div1></div>
</fieldset>
.....

如果是这种情况，那么这个jQuery代码片段就能解决问题：

$(function(){   
    $('p').each(function(index,item){
      var nextDiv = $(item).next();
      var followingDiv = $(nextDiv).next('div');
      $(item).wrap("<fieldset id='fieldset" + index + "'></fieldset>");
      $("#fieldset"+index).append(nextDiv).append(followingDiv);
    });
});

- Jose Basilio

---

谢谢，我想到了类似的东西，但没有你的那么简洁。 - chrism

Answer 2

@JoseBasillo的回答可以简化和概括一下：

var $wrapper = $('#wrapper');
$wrapper.children('p').each(function(index,item) {
    var $following = $(item).nextUntil('p, fieldset');
    $wrapper.append($('<fieldset>').append(item, $following));
});

演示

这段代码将进行转换。

<div id="wrapper">
    <p>paragraph 1</p>
        ... (whatever but p or fieldset)
    <p>paragraph 2</p>
        ... (whatever but p or fieldset)
    ... (p followed by whatever but p or fieldset)
</div>

转换成

<div id="wrapper">
    <fieldset>
        ... (whatever but p or fieldset)
    </fieldset>
    <fieldset>
        ... (whatever but p or fieldset)
    </fieldset>
    ... (fieldset containg [p followed by whatever but p or fieldset])
</div>

如果有人更喜欢短小的代码而不是可读性，那么就不需要使用变量$following：

var $wrapper = $('#wrapper');
$wrapper.children('p').each(function(index,item) {
    $wrapper.append($('<fieldset>').append( item, $(item).nextUntil('p, fieldset') ));
});

- Oriol