0

jsを使用して変更したい、通常の順序付けられていないリンクのリストがあります

<ul>
  <li><a href="#">Theme 1</a></li>
  <li><a href="#">Theme 2</a></li>
  <li><a href="#">Theme 3</a></li>
  <li><a href="#">Theme 4</a></li>
  <li><a href="#">Theme 5</a></li>
  <li><a href="#">Theme 6</a></li>
  <li><a href="#">Theme 7</a></li>
  <li><a href="#">Theme 8</a></li>
  <li><a href="#">Theme 9</a></li>
  <li><a href="#">Theme 10</a></li>
  <li><a href="#">Theme 11</a></li>
  <li><a href="#">Theme 12</a></li>
</ul>

次の出力が必要です。

<div class="themes__row">
  <div class="themes__item><a href="#">Theme 1</a></div>
  <div class="themes__item><a href="#">Theme 2</a></div>
  <div class="themes__item><a href="#">Theme 3</a></div>
  <div class="themes__item><a href="#">Theme 4</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 5</a></div>
  <div class="themes__item><a href="#">Theme 6</a></div>
  <div class="themes__item><a href="#">Theme 7</a></div>
  <div class="themes__item><a href="#">Theme 8</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 9</a></div>
  <div class="themes__item><a href="#">Theme 10</a></div>
  <div class="themes__item><a href="#">Theme 11</a></div>
  <div class="themes__item><a href="#">Theme 12</a></div>
</div>

いくつかの異なるソリューションを試してみましたが、最終的には非常に面倒なので、表示するコードはありません。これはどのように巧妙な方法で行われますか? それが重要な場合、サイトはjQuery 1.4.4を使用しています。

4

3 に答える 3

0

次のようなものを使用できます。

var items = $("ul li a");
var parent = items.eq(0).closest("ul"), cntr = 0;
for (var i = 0; i < items.length / 4; i++) {
    var container = $('<div class="themes__row"></div>');
    for (var j = 0; j < 4; j++) {
        $('<div class="themes__item"><a href="#">' + items.eq(cntr++).html() + '</a></div>').appendTo(container);
    }
    $(document.body).append(container);
}
parent.remove();

実際のデモ: http://jsfiddle.net/jfriend00/7zWt9/

于 2013-10-27T09:34:47.097 に答える
0

次のコードを使用できます。

var target = $('ul');
var elems = target.children('li').contents(); //get li contents

for (var i = 0; i < elems.length; i++) {
    var elem = document.createElement('div');
    elem.className = 'themes__item';
    elem.appendChild(elems[i]); //wrap contents in divs

    //append divs to rows
    if (i % 4 == 0) { //if elem index is multiple of 4
        //create a new row and add elem
        $('<div class="themes__row">').insertBefore(target).append(elem); 
    } else {
        target.prev().append(elem); //else append elem to existing row
    }
}
target.remove(); // remove ul

ここでライブを見るhttp://jsfiddle.net/valentin/u6LkM/3/

于 2013-10-27T10:36:03.570 に答える