カンマ区切りの値：文字列からリストするオブジェクト

Question

jQueryオブジェクトに結合するコンマ区切りの値を含む文字列を持つ変数が3つあります（わかりません）。その後、リストを追加するには、たとえば、各項目での動作を反復する

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

：へ

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

これを行うための最善の方法は何ですか？

あなたはこのようなあなたの項目の配列構築することができます

Answer 1

：それからHTMLを構築するために、次に

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

Answer 2

これにはDOMを使用することができます。

innerHTMLを使用すると、JavaScriptがインラインHTMLになることを意味します。これはSeperations of concernsを壊し、メンテナンスの地獄につながります。

Live Example

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

あなたはクロスブラウザの遵守のためにDOM-shimとES5-shimが必要な場合があります。