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" />');

任何提示都非常赞赏。

由于

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/

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

2 个答案: