Question

我有一些类

的ul

<ul class="class">

</ul>

我有jquery脚本，必须在ul-tags之间放置li-tags：

$(document).ready(function() {
  $("select option").each(function () {
        var m = $( this ).text();
        $("ul.class").append("<li>", m, "</li>");
  });

但它不起作用。脚本完成后，我会看到如：

<ul class="class">
   <li></li>
   Option 1
   <li></li>
   Option 2
   <li></li>
   Option 3
</ul>

Answer 1

使用$("ul.class").append("<li>"+m+"</li>");

而不是

$("ul.class").append("<li>" + m + "</li>");。

按documentation，它“将由参数指定的内容插入到匹配元素集合中每个元素的末尾”。语法为.append( content [, content ] )，您也可以使用.append( function(index, html) )。附加可以采用任何数量的附加参数。

现在$("ul.class").append("<li>" + m + "</li>");中发生的事情是，每个参数都将被视为要附加的单独DOM内容。这就是为什么首先附加“<li></li>”然后附加“文本”的原因。 “文本”将被视为另一个参数。

Answer 2

$("ul.class").append("<li>", m, "</li>");

应该是

$("ul.class").append("<li>" + m + "</li>");

Answer 3

我还建议将LI元素的整个列表作为单个字符串构建，然后再将其传递给append（..）。限制将导致浏览器将DOM结构更改为单个调用的调用会更有效。

在循环中构建字符串并将其传递给循环后的

例如：$('ul').append('<li>option1'</li>.....<li>optionn<li>');

jQuery append（） - 将li-tags放到列表中

3 个答案: