从jQuery中的字符串值列表创建和附加DOM对象

时间:2012-06-15 23:25:02

标签: jquery dom

我很困惑,我不确定我的jQuery知识在哪里崩溃。任何人都可以解释为什么这不起作用? (我已设置JSFiddle page以便更容易直接进入)

鉴于HTML:

<ul id="MyList"></ul>

和Javascript字符串:

var itemString = "Item1,Item2,Item3";

为什么将字符串附加为LI对象的以下方法不起作用(报告的错误是NOT_FOUND_ERR:DOM异常8):

aStrings = itemString.split(",");
aLi = $.map($.makeArray(aStrings), function(x) {
    return $("<li>").text(x);
});
$("#MyList").append(aLi);

使用$ .each()有效(以下示例),但是我对$ .map方法的理解有什么问题?

aStrings = itemString.split(",");
$.each(aStrings, function(i, x) {
  $("MyList").append($("<li>").text(x));
});

我的数组aLi不是LI DOM元素的真正集合吗?

提前致谢...

2 个答案:

答案 0 :(得分:2)

在映射中甚至没有理由将jQuery中想要的简单html包装起来。它会创建额外不必要的函数调用此外,aStrings已经是一个数组,因此无需使用$.makeArray()

试试这个:

   aStrings = itemString.split(",");
   aLi = $.map(aStrings, function(x) {
        return  "<li>" + x +"<li>";
   }).join('');

   $("#MyList").append(aLi);

$.map返回一个字符串数组,join()然后更改为单个字符串,然后附加

DEMO:http://jsfiddle.net/3cYaW/2/

答案 1 :(得分:1)

来自jQuery文档:

  

描述:通过函数传递当前匹配集中的每个元素,生成一个包含返回值的新jQuery对象。

您没有在匹配的集合中使用它,即$('someSelector').map(function{}).doSomethingWithReturnedJQueryObject()。如果你有一个列表中的项目,并希望将它们移动到另一个列表,你可以使用map函数,但我认为它不会像你在非工作示例中那样使用。

换句话说:map()函数旨在以与您在此处尝试使用它的方式完全相反的方式使用。您可以使用它来获取每个<li>的内容,并从中构建index1,index2,index3字符串。