4

重複の可能性：
.after（）を使用してhtmlの終了タグと開始タグを追加する

ほぼ同じ高さの3列のリスト（）を表示したい<ul>ので、タグを数え、<li>appendを使用してリストを動的に生成します。しかし$el.append($("</ul><ul class='new'>"))、現在のリストを閉じて新しいリストを追加すると、のように追加され<ul class='new'></ul>ます。

<ul>タグを閉じて、もう一度開きたいだけです。jQueryappend()関数はどういうわけかDOM構造を検証していますか？どうすれば見た目の結果を得ることができますか？これを達成するためのより良い方法はありますか？

HTML：

<div id="mylist">
   here the list will show
</div>

Jquery：

var $el = $("#mylist");
$el.empty(); // remove old options
$el.append($("<ul class='new'>"));
var j = parseInt(response.length/3);
var i = 0;
$.each(response, function(key, value) {
  i++;
  if(i%j==0){
      $el.append($("</ul><ul class='new'>")).append($("<li></li>").text(value.nombre));
  }
  else{
     $el.append($("<li></li>").text(value.name));
  }});

期待される結果：

<div >
   <ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new"> //This is what I want to append
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul>
</div>

私が得たもの：

<div id="mylist">
<ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul> 
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
</div>
4

3 に答える 3

4

$('</ul><ul>')あなたが思うことをするつもりはありません。DOM要素を作成しようとしますが、おそらく。になり<ul>ます。

必要な各要素を作成してつなぎ合わせるか、を使用してhtmlを文字列として操作する必要があります.html()。私は間違いなくこれらのオプションの最初のものをお勧めします。

于 2013-02-04T23:35:06.947 に答える
4

単純：

LIVE DEMO

オブジェクトの代わりに、必要な場所"strings"に設定するために遊んでください。</ul><ul>

var arr = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'];

var str = "<ul class='new'>";
for(var i=0; i<arr.length;) { 
              str += "<li>"+ arr[i++] +"</li>" ;  
  if(i%3===0) str += "</ul><ul class='new'>"   ;
}
str += "</ul>" ;

$("#mylist").html( str );
于 2013-02-04T23:42:35.443 に答える
4

まず、ingは、要素にappend設定するよりもはるかに計算コストの高い操作であることに注意することが重要です。innerHTML次に、jQueryがHTML文字列（例$('<ul />');）を。を介してDOM要素に解析することに注意することが重要document.createElementです。言い換えれば、それは文字列を連結するようなものではありません。部分的な要素を作成することはできません。

必要なのは、生の文字列連結を使用してHTML文字列を作成し、それをを介してDOMにダンプすることinnerHTMLです。例えば：

var colHTML = [];
var numPerCol = Math.ceil(response.length/3);
var i=0;
$.each(response, function(key, value) {
    var curCol = Math.floor(i / numPerCol);
    if (i % numPerCol == 0)
        colHTML[curCol] = '';
    colHTML[curCol] += '<li>' + value.nombre + '</li>'; // if nombre has invalid HTML, you need to escape it
});

var html = '<ul class="new">' + colHTML.join('</ul><ul class="new">') + '</ul>';
document.getElementById('mylist').innerHTML = html;
于 2013-02-04T23:40:26.587 に答える