0

I have a generic list

<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>

But what I want to do is

<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>

I could use any advice as to the best way to deal with this situation.

4

4 回答 4

2

如果您<div class="oneByOne_item top_offers">在 HTML 中删除 ，您可以使用 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>");
}

希望这可以帮助。

于 2013-08-17T09:35:01.043 回答
1

使用纯 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;
        }

    }

}

虽然没有测试:)

于 2013-08-17T09:39:05.057 回答
0

你可以使用 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);
于 2013-08-17T09:59:17.063 回答
0

用 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/

于 2013-08-17T09:45:43.063 回答