4

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

4

5 回答 5

7

尝试

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

演示：小提琴

于 2013-09-09T13:23:52.953 回答
3

你可以这样做

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

小提琴

于 2013-09-09T13:34:08.233 回答
1 
$.fn.combine = function() {
    var parent = $(this[0]);
    this.each(function(elem) {
        parent.append($(elem).html());
    });
};

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

于 2013-09-09T13:29:06.883 回答
1

首先，您的 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/

于 2013-09-09T13:46:15.050 回答
0

对于将来提及的人，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

于 2014-04-18T19:56:42.193 回答