Question

我有一个通用列表

<div id="banner">
     <div class="oneByOne_item top_offers">
          <div class="top_offer_wrap">item1</div>
          <div class="top_offer_wrap">item2</div>
          <div class="top_offer_wrap">item3</div>
          <div class="top_offer_wrap">item4</div>   
          <div class="top_offer_wrap">item5</div>   
          <div class="top_offer_wrap">item6</div>       
     </div>
</div>

但我想做的是

<div id="banner">
     <div class="oneByOne_item top_offers">
          <div class="top_offer_wrap">item1</div>
          <div class="top_offer_wrap">item2</div>
          <div class="top_offer_wrap">item3</div>
     </div>
     <div class="oneByOne_item top_offers">
          <div class="top_offer_wrap">item4</div>   
          <div class="top_offer_wrap">item5</div>   
          <div class="top_offer_wrap">item6</div>       
     </div>
</div>

我可以使用任何建议来解决这种情况的最佳方法。

Answer 1

如果删除HTML中的<div class="oneByOne_item top_offers">，可以使用jQuery函数.slice()和.wrapAll()再次添加它：

var div = $("#banner > div");
for(var i = 0; i < div.length; i+=3) {
  div.slice(i, i+3).wrapAll("<div class='oneByOne_item top_offers'></div>");
}

希望这有帮助。

Answer 2

使用纯javascript

function separate() {
    var container = document.getElementById('banner');
    var divElems = container.querySelectorAll(".top_offer_wrap");
    var count = 0;
    var newDiv = null;
    for (var i = 3; i < divElems.length ; i++) {
        if(count == 0) {
            newDiv = document.createElement("div");
            newDiv.className = 'oneByOne_item top_offers';
            container.appendChild(newDiv);
        }

        var tempDiv = divElems[i];
        tempDiv.parentNode.removeChild(tempDiv);

        newDiv.appendChild(tempDiv);
        count ++;

        if(count == 3) {
            count = 0;
        }

    }

}

虽然未经测试：）

Answer 3

使用javascript执行此操作并不聪明。你应该在服务器端这样做。

如果您真的想在javascript中执行此操作，可以使用以下脚本：

var banner = document.getElementById('banner');

var children = banner.getElementsByClassName('oneByOne_item')[0].getElementsByTagName('div');

var output = "";

for( var i = 0; i < children.length; i += 3 ) {
    var div = "<div class=\"oneByOne_item top_offers\">";
    div += children[i].outerHTML;
    if( i + 1 < children.length ) {
        div += children[i+1].outerHTML;
    }
    if( i + 2 < children.length ) {
        div += children[i+2].outerHTML;
    }
    div += "</div>";

    output += div;
}

banner.innerHTML = output;

代码应该是自我解释的。我使用getElementById，getElementsByClassName和getElementsByTagName来选择要执行操作的正确元素。

小提琴：http://jsfiddle.net/P95bQ/

Answer 4

你可以使用jQuery。

像这样（已经测试）：

var len = $('.top_offer_wrap').length,
    length = len % 3 ? (len / 3) + 1 : len / 3,
    html = '';

for(var i = 0; i < length; i++){
   html += '<div class="oneByOne_item top_offers">';
   for(var j = 1; j < 4 && i * 3 + j <= len; j++){
    html += ' <div class="top_offer_wrap">item' + (i * 3 + j)+'</div>';
   }
   html += '<div>';
}

$('#banner').html(html);

我需要拆分每3个div并将它们附加到div

4 个答案: