jQuery将div包装器添加到指定元素

Question

我有一个通过CMS生成的HTML块。我想为一组特定的元素添加一些DIV包装器。

<ul id="gform_fields_1">
    <li id="field_1_8" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_9" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_10" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_11" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_12" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_13" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_14" class="gfield">
        <!-- content -->
    </li>
</ul>

我希望实现以下模式:

<ul id="gform_fields_1">
    <div class="wrap">
        <li id="field_1_8" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_9" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_10" class="gfield">
            <!-- content -->
        </li>
    </div>
    <div class="wrap">
        <li id="field_1_11" class="gfield">
            <!-- content -->
        </li>
    </div>
    <div class="wrap">
        <li id="field_1_12" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_13" class="gfield">
            <!-- content -->
        </li>
    </div>
</ul>

这些包装是针对特定的元素组，例如我需要将#field_1_8、#field_1_19和#field_1_10封装在一个DIV中，然后将#field_1_11封装在一个DIV中，最后再处理其余的元素。重点是，我想指定ID，而不是基于任何逻辑来封装。

.wrap() 似乎是解决问题的方法，可以像这样使用：

$('LIST ALL IDs').wrap('<div class="new" />');

非常感谢您的帮助与支持。

谢谢。

- Dave

Answer 1

自从jQuery的选择器语法与CSS类似，你可以像下面这样列出你的元素：

$('li#field_1_8, li#field_1_9, li#field_1_10').wrapAll('<div class="new" />')

- Miklos Aubert

---

谢谢，不过这会将每个单独的ID都包装在“new”中，而我需要将这3个元素都包装在“new”中。 - Dave

是的，您需要使用wrapAll将多个元素包装在单个div中。 - SRy

Answer 2

你可以使用slice

$('li').slice(0, 3).wrapAll("<div class='wrap'></div>")
$('li').slice(3,4).wrap("<div class='wrap'></div>")
$('li').slice(4,7).wrapAll("<div class='wrap'></div>")

jsfiddle: http://jsfiddle.net/NpxxR/

- SRy

---

谢谢。这个方法很好，但是通过选择元素ID，我可以更好地控制所需的操作（例如生成的代码可能包含隐藏元素，这使得0,3 / 3,4等定位有些棘手）。 - Dave