Javascript 逗号分隔值：从字符串到要列出的对象

我有3个变量，字符串中包含逗号分隔的值（我不知道有多少），我想将这些值组合到jQuery对象中

"name1,name2,name3,nameN"
"value1,value2,value3,valueN"
"id1,id2,id3,idN"

致：

然后在每个项目上迭代操作，例如追加列表：

<h3>items</h3>
<ul>
    <li>item1</li>
       <ul>
          <li>value: <b>value1</b></li>
          <li>id: <b>id1</b></li>
       </ul>

    [...]

    <li>itemN</li>
       <ul>
          <li>value: <b>valueN</b></li>
          <li>id: <b>idN</b></li>
       </ul>
<ul>

项目

项目1

价值：价值1
id:id1

[...]
项目n

价值：瓦伦
id:idN

---

执行此操作的最佳方法是什么？

您可以构建一个项目数组，如下所示：

var names = "name1,name2,name3,nameN";
var values = "value1,value2,value3,valueN";
var ids = "id1,id2,id3,idN";

var namesArray = names.split(",");
var valuesArray = values.split(",");
var idsArray = ids.split(",");

var item, items = [];
for (var i = 0; i < namesArray.length; i++) {
    item = {};
    item.name = namesArray[i];
    item.value = valuesArray[i];
    item.id = idsArray[i];
    items.push(item);
}

var names=“name1，name2，name3，nameN”；
var values=“value1、value2、value3、valueN”；
var ids=“id1、id2、id3、idN”；
var namesArray=names.split（“，”）；
var valuesArray=values.split（“，”）；
var idsArray=ids.split（“，”）；
var项目，项目=[]；
对于（var i=0；i

然后，要从中构建HTML，可以执行以下操作：

var main = $("<ul>");
var str = "";
for (var i = 0; i < items.length; i++) {
    str += "<li>" + items[i].name + "</li><ul><li>value: <b>" + items[i].value + "</b></li>";
    str += "<li>id: <b>" + items[i].id + "</b></li></ul>";
}
main.html(str);
$(document.body).append("<h3>items</h3>")
$(document.body).append(main);

var main=$（“
”）；
var str=“”；
对于（变量i=0；i”+项目[i]。名称+”
值：“+items[i]。值+”
”；
str+=“
id:“+items[i].id+”
”；
}
main.html（str）；
$（document.body）.附加（“项目”）
$（document.body）.append（main）；

---

您可以在这里看到它的工作原理：。

您可能需要使用DOM来完成此操作

使用

innerHTML

意味着在javascript中使用内嵌HTML。这将导致维护地狱

---

您可能需要一个and来实现跨浏览器遵从性。

实际上，从一开始就需要。我知道我可以使用split，但后来我发现自己使用的数组组合了相同的类型值……我只是尝试了一下。“var item，items=[]；”部分不起作用。我分成两行，但最后我遇到了另一个问题：列表中的每个值现在都是“nameN，valueN，idN”。我会马上发布这个示例。我对代码做了一个更正，它在这里工作：。我“篡改”了您的代码示例：jsfiddle.net/yWU3L它没有按预期工作。。。编辑：我明白了！是什么导致了问题？请查看我在回答中的更正以及我在之前的评论中发布的链接。现在使用ES6做这件事的正确方法是什么？这段代码与innerHTML示例的关注点相同。在这两种情况下，您都是通过javascript创建HTML的，因此没有分离的关注点。我很想知道为什么您认为此代码比innerHTML版本更易于维护？在innerHTML版本中，很容易看到创建了什么HTML。在您的版本中，您必须对代码进行反向工程，以确定实际创建的HTML是什么。仅供参考，您的HTML创建代码是31行，而innerHTML版本是8行。长度不是善良的衡量标准，但在这种情况下，它与简单有关。您的代码要复杂得多，需要ES5垫片以实现跨浏览器兼容性。这个答案是为没有很多javascript经验的人设计的。你认为他们会发现哪个答案更容易理解、更容易实现和维护？我应该补充（为了其他读者的利益）这个对话与这个答案中发生的事情有关：。@jfriend00我不认为这个代码“更简单”，这是愚蠢的。我认为这是“正确的做法”。从长远来看，最好不要考虑HTML，而要考虑节点。Hmmm，在用Javascript创建表示时，您会说：“最好不要考虑HTML”。这很难做到，但你让我说不出话来。

var main = $("<ul>");
var str = "";
for (var i = 0; i < items.length; i++) {
    str += "<li>" + items[i].name + "</li><ul><li>value: <b>" + items[i].value + "</b></li>";
    str += "<li>id: <b>" + items[i].id + "</b></li></ul>";
}
main.html(str);
$(document.body).append("<h3>items</h3>")
$(document.body).append(main);

var createListFragment = (function () {
    function createItems(names,value,ids) {
        var namesArray = names.split(",");
        var valuesArray = value.split(",");
        var idsArray = ids.split(",");

        return namesArray.map(function (name, key) {
            return {
                name: name,
                value: valuesArray[key],
                id: idsArray[key]
            }
        });        
    }

    function createLi(item) {
        var itemLi = document.createElement("li");
        itemLi.textContent = item.name;

        var propertiesUl = document.createElement("ul");
        itemLi.appendChild(propertiesUl);

        var valueLi = document.createElement("li");
        valueLi.appendChild(document.createTextNode("value: "));
        var b = document.createElement("b");
        b.textContent = item.value;
        valueLi.appendChild(b);
        propertiesUl.appendChild(valueLi);

        var idLi = document.createElement("li");
        idLi.appendChild(document.createTextNode("id: "));
        var b = document.createElement("b");
        b.textContent = item.id;
        idLi.appendChild(b);
        propertiesUl.appendChild(idLi);

        return itemLi;
    }

    function createListFragment(names, values, ids) {
        var items = createItems(names, values, ids);
        var fragment = document.createDocumentFragment();

        var h3 = document.createElement("h3");
        h3.textContent = "items";
        fragment.appendChild(h3);

        var ul = document.createElement("ul");
        fragment.appendChild(ul);

        items.forEach(function (item) {
            var li = createLi(item);
            ul.appendChild(li); 
        });

        return fragment;
    }

    return createListFragment;
})();