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

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中，然后将其余元素封装在DIV中。重点是，我想指定it，而不是基于任何逻辑。

.wrap()似乎是一条可行的道路，可以像这样工作：

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

任何提示都非常感谢。

谢谢

Answer 1

由于jQuery的选择器语法非常类似于CSS，因此您可以简单地列出元素，如下所示：

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

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/