逗号分隔值:从字符串到对象再到列表 [英] Comma separated values: from strings to objects to list

问题描述

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

I have 3 variables with strings containing comma separated values (I don't know how many) which I want to combine into jQuery objects.

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

收件人:

var item1 = { name: name1, value: value1, id: id1 };
var item2 = { name: name2, value: value2, id: id2 };
var item3 = { name: name3, value: value3, id: id3 };
var itemN = { name: nameN, value: valueN, id: idN };

然后要遍历每个项目的操作，例如附加一个列表:

To then iterate an operation over each item, for example to append a list:

<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>

做到这一点的最佳方法是什么?

What is the best way to do this?

推荐答案

您可以像这样构建商品数组:

You can build an array of your items like this:

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);
}

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

Then, to build the HTML from that, you can do this:

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);

您可以在这里看到它的工作: http://jsfiddle.net/jfriend00/yWU3L/4/.

You can see it work here: http://jsfiddle.net/jfriend00/yWU3L/4/.

这篇关于逗号分隔值:从字符串到对象再到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！