如何组合具有相同类的两个div – jQuery

我有这样的div结构

<div class="items">
    <div class="itemRow">
        <div class="item">
        <div class="item">
        <div class="item">
    </div>
    <div class="itemRow">
        <div class="item">
        <div class="item">
        <div class="item">
    </div>
</div>

如何让它们合并/组合两个div“itemRow”？就像这样

<div class="items">
    <div class="itemRow">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
    </div>
</div>

使用jQuery

解决方法

首先,您的itemRow> item(s)没有结束标记.

你需要做的是遍历所有具有相同类的元素,将第一个元素保存为基类,然后将具有相同类的其他元素的子元素附加到基本元素：

var endelement; 
$.each($('.itemRow'),function(index,value) {
    if (index == 0)
        endelement = $(this).clone();
    else
    {
        $.each($(this).children('.item'),function(i,v){
            $(this).clone().appendTo(endelement);
        });
    }
});

$('.endProduct').html(endelement[0].outerHTML);

通过这种方式,您可以将最终结果作为单独的变量获得,您可以随意使用它,而原始元素保持不变.

我在这里创造了一个小提琴：
http://jsfiddle.net/dejvidpi/qEBZ4/