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

Question

我有一个 CMS 生成的 HTML block 。我想将一些 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" />')