Question

我有像这样的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

Answer 1

尝试

var $rows = $('.items .itemRow');
$rows.first().append($rows.not(':first').children())
$rows.not(':first').remove();

演示：Fiddle

Answer 2

你可以这样做

$('.itemRow:first') // select first itemRow
   .append($('.item')) // append all .item to first itemRow
   .nextAll('.itemRow') // get all the next .itemRow
   .remove(); // remove the them

FIDDLE

Answer 3

$.fn.combine = function() {
    var parent = $(this[0]);
    this.each(function(elem) {
        parent.append($(elem).html());
    });
};

Tiny插件，它接受数组中的第一个元素，并将所有其余元素附加到其中。像$("div").combine();一样使用它。

Answer 4

首先，您的itemRow＆gt; 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/

Answer 5

对于将来推荐的人，AdrianCooney答案的固定和改进版本：

$.fn.combine = function(selector) {
 var parent = $(this[0]);
 this.each(function(i) {
    parent.append($(this).children(selector));
    if(i>0)
    $(this).remove();    
 });
};

您可以将其称为

$(".itemRow").combine('.item');

JSFiddle

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

5 个答案: