Html 循环可变数量，然后拆分和换行

我有一个表单，希望在

中对不同字段进行排序

我设法循环了第一个元素并将它们包装起来，但我无法理解下一个部分。 在您看到的HTML中，我设法将前6个元素包装到

中。我需要跳过“Left/Right/Both”元素，并包装剩余的

。现在，每个表单中剩余元素的数量可能会有所不同，但它始终是偶数。 我想将这些剩余的元素拆分成两个div： （为了可读性，我删除了大部分内容）

名字


姓


电话


电子邮件


出生日期


笔记


左/右/两个
左边
赖特
二者都


波尔图左


颜色：左


排气：左


波尔图右翼


颜色：对


对

添加

第一部分的jQuery：

var $span = $(".cart > p");
    for (var i = 0; i < 6; i += 6) {
        var $div = $("<div/>", {
            class: 'naw-wrapped'
        });
        $span.slice(i, i + 6).wrapAll($div);
    }
$(".cart > p").addClass('product-option-element');
var $optionsdiv = $("<div/>", {
    class: 'product-options-wrapped'
});
$(".product-option-element").wrapAll($optionsdiv);
$(".product-option-element:first").removeClass("product-option-element").addClass("option-left-right");

var$span=$（“.cart>p”）；
对于（变量i=0；i<6；i+=6）{
变量$div=$（“”{
班级：'不包装'
});
$span.slice（i，i+6）.wrapAll（$div）；
}
$（“.cart>p”）.addClass（'product-option-element'）；
变量$optionsdiv=$（“”{
类：“产品选项已包装”
});
美元（“.product option element”）.wrapAll（$optionsdiv）；
$（“.product option element:first”）.removeClass（“product option element”）.addClass（“option left-right”）；

我需要知道如何只选择剩余的

，而不选择

中的。以及如何循环、拆分和包装这些剩余元素。1

中的所有元素，然后跳过1并拆分+换行。对如何执行这种拆分和包装有何建议

理想情况下，它看起来像这样：

<form class="cart" action="">
    <div class="naw-wrapped">
        <p>
            <label>First name</label> 
            <input>
        </p>
        <p>
            <label>Last name</label> 
            <input>
        </p>
        <p>
            <label>Phone</label> 
            <input>
        </p>
        <p>
            <label>E-mail</label> 
            <input>
        </p>
        <p>
            <label>Date of birth</label> 
            <input>
        </p>
        <p>
            <label>Notes</label> 
            <textarea ></textarea>
        </p>
    </div>
    
    <div class="product-options-wrapped">
        <p class="product-option-element">
            <label>Left/Right/Both</label> 
            <select>
                <option>Left</option>
                <option>Right</option>
                <option>Both</option>
            </select>
        </p>

        <div class="options">
            <p class="product-option-element">
                <label>Porto Left</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Color: Left</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Venting: Left</label> 
                <input>
            </p>
        </div>
        <div class="options">
            <p class="product-option-element">
                <label>Porto Right</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Color: Right</label> 
                <input>
            </p>
            <pclass="product-option-element">
                <label>Venting: Right</label> 
                <input>
            </p>     
        </div>
    </div>
           

    <button type="submit">Add</button>
</form>

名字


姓


电话


电子邮件


出生日期


笔记


左/右/两个
左边
赖特
二者都


波尔图左


颜色：左


排气：左


波尔图右翼


颜色：对

对

添加

更新：向剩余的

元素添加了类，并按照Silver大师的建议将这些元素包装在

中。 有了这个，我可以给第一个元素一个不同的类

---

剩下的就是找到一种方法来分割可变数量的

并将其包装在2

中。简单的方法是首先为要用脚本选择的p元素提供它们自己的CSS类。如果您不能做到这一点，另一个选项将是一个非常混乱的代码，它将无法正常工作。

在为所有剩余的元素提供一个类之后，只需将元素的数量除以，并将这些元素包装到一个已经回答了不同问题的元素中即可。感谢@Master Silver关于增加课程的建议。这让事情变得容易多了

我使用的解决方案：

jQuery（文档）.ready（函数（$）{
var$span=$（“.cart>p”）；
对于（变量i=0；i<6；i+=6）{
变量$div=$（“”{
班级：'不包装'
});
$span.slice（i，i+6）.wrapAll（$div）；
}
$（“.cart>p”）.addClass（'product-option-element'）；
变量$optionsdiv=$（“”{
类：“产品选项已包装”
});
美元（“.product option element”）.wrapAll（$optionsdiv）；
$（“.product option element:first”）.removeClass（“product option element”）.addClass（“option left-right”）；
变量$options1=$（“”{
类别：“选项-1”
});
变量$options2=$（“”{
类别：“选项-2”
});
var$currentoptions=$（“.product option元素”）；
一半=数学地板（$currentoptions.length/2）；
$currentoptions.filter（函数（i）{returni=half；}）.wrapAll（$options2）；
});
.naw包装{
背景：蓝色；
}
.包装的产品选项{
背景：红色；
}
.选项-1{
背景：绿色；
}
.备选方案-2{
背景：暗绿色；
}


名字


姓


电话
<form class="cart" action="">
    <div class="naw-wrapped">
        <p>
            <label>First name</label> 
            <input>
        </p>
        <p>
            <label>Last name</label> 
            <input>
        </p>
        <p>
            <label>Phone</label> 
            <input>
        </p>
        <p>
            <label>E-mail</label> 
            <input>
        </p>
        <p>
            <label>Date of birth</label> 
            <input>
        </p>
        <p>
            <label>Notes</label> 
            <textarea ></textarea>
        </p>
    </div>
    
    <div class="product-options-wrapped">
        <p class="product-option-element">
            <label>Left/Right/Both</label> 
            <select>
                <option>Left</option>
                <option>Right</option>
                <option>Both</option>
            </select>
        </p>

        <div class="options">
            <p class="product-option-element">
                <label>Porto Left</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Color: Left</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Venting: Left</label> 
                <input>
            </p>
        </div>
        <div class="options">
            <p class="product-option-element">
                <label>Porto Right</label> 
                <input>
            </p>
            <p class="product-option-element">
                <label>Color: Right</label> 
                <input>
            </p>
            <pclass="product-option-element">
                <label>Venting: Right</label> 
                <input>
            </p>     
        </div>
    </div>
           

    <button type="submit">Add</button>
</form>