如何从多个 html 列表中的属性构建数组？答案

【问题标题】：How can I build an array from attributes in multiple html lists?如何从多个 html 列表中的属性构建数组？
【发布时间】：2012-10-20 20:21:25
【问题描述】：

我正在尝试从多个 div 的无序列表中获取多个属性，如下所示：

    <div class="graph" style="display:none;">
        <ul g-max='10'>
            <li g-color='green' g-val='4'></li>
            <li g-color='blue' g-val='3.6'></li>
            <li g-color='red' g-val='8'></li>
        </ul>
    </div>

    <div class="graph" style="display:none;">
        <ul g-max='14'>
            <li g-color='green' g-val='2'></li>
            <li g-color='blue' g-val='9'></li>
            <li g-color='red' g-val='3.98'></li>
        </ul>
    </div>

我正在尝试使用 jQuery 来执行此操作，并且正在使用以下内容：

    var graph_array = [];

    $('.graph').each(function(divind)
    {
          $('ul').each(function(ulind)
          {
               $('li').each(function(liind)
               {
                     graph_array[divind][ulind][liind]['g-val'] = $(this).attr('g-val');
                     graph_array[divind][ulind][liind]['g-color'] = $(this).attr('g-color');
               });
          });
    });
    alert(graph_array);

但是，即使我四处移动并尝试不同的技术，例如 .map() 或 .toArray()，也没有任何效果。有任何想法吗？提前致谢！

编辑：我想要一个看起来像这样的结果：

    [{
       {
         {g-color:green, g-val:4},{g-color:blue, g-val:3.6},{g-color:red, g-val:8}
       },
       {
         {g-color:green, g-val:2},{g-color:blue, g-val:9},{g-color:red, g-val:3.98}
       }
    }]

【问题讨论】：

你能显示你想要结束的数组/对象吗？
我不太确定你希望最后得到什么，但我会这样说：当你说 $('li').each 时，它会遍历页面上的每个 li --不仅仅是父循环引用的ul 中的那些。也许您想要$(li, ulind).each 之类的东西，它将选择器限制在给定的上下文中。（当然，您需要在每个级别都这样做。）
如果您添加所需的输出会有所帮助..
哇，不合法！ [ {green:4, blue:3.6, red:8}, {green:2, blue:9, red:3.98} ]; 或类似的呢？这是合法的 js，包含所有可用的数据。
酷！无论如何，您至少在下面得到了一个好的答案。

标签： jquery multidimensional-array html-lists

【解决方案1】：

您需要实例化数组或预填充它们。比如这样：

var graph_array = [];
$('.graph').each(function(divind, e)
{
      $(e).find('ul').each(function(ulind, e)
      {
           $(e).find('li').each(function(liind, e)
           {
               // create level 1 sub-array, or use existing
               var level1 = (graph_array[divind] || (graph_array[divind] = []));

               // create or re-use level #2 sub-array
               var level2 = (level1[ulind] || (level1[ulind] = []));

               // create a property map
               var map = (level2[liind] = {});
               map ['g-val'] = $(e).attr('g-val');
               map ['g-color'] = $(e).attr('g-color');
           });
      });
});
// display as a string
alert(JSON.stringify(graph_array));

查看这里的工作示例：http://jsfiddle.net/Q57W5/5/

【讨论】：

不错！这很好用。但是，我注意到你说我应该假设两个数组。有没有办法让它接受任何数量的不同divs？我想让它更通用一点，以便它能够识别所有 divs 和 .graph 类。
@Cod-nerd 在我发布后我意识到这会更好——请参阅我编辑的答案。
我在你的 jsfiddle 链接上试过这个，效果很好，但在我自己的页面上失败了。我查看了 jquery，但我不认识 stringify。这是相对的 jsfiddle 还是特定的包？
@Cod-nerd JSON.stringify 它是 Javascript 1.7 的标准：developer.mozilla.org/en-US/docs/JavaScript/Reference/…
@Cod-nerd 这是浏览器对它的支持... IE7 及以下不支持它。 caniuse.com/json

【解决方案2】：

这里要注意的主要事情是您没有初始化您尝试附加到的数组。您需要为每个组初始化一个数组。这里要做的另一件事是利用each 函数的范围及其两个参数之一。

$.each($(element_array),function(index,elem){
  // $(this)
  // $(elem) 
});

我列出了两种可互换的方式，您可以使用each 的范围，也可以使用this 关键字。当您处于each 循环的每次迭代中时，可以在$(this) 变量中找到当前项。您也可以使用$(elem)。

如果您嵌套了each 命令，我发现为每个嵌套循环使用不同的变量而不使用this 会更好。我觉得它不那么令人困惑。

所以基本上你需要做的是使用相对当前变量在其死者中搜索。

var graph_array = [];

$('.graph').each(function(divIndex,currentDiv) {
  if (graph_array[divIndex] == undefined){ graph_array[divIndex] = []; }
  $(currentDiv).find('ul').each(function(ulIndex,currentUl) {
    if (graph_array[divIndex][ulIndex] == undefined){ graph_array[divIndex][ulIndex] = []; }
    $(currentUl).find('li').each(function(liIndex,currentLi) {
      if (graph_array[divIndex][ulIndex][liIndex] == undefined){ graph_array[divIndex][ulIndex][liIndex] = []; }     
      graph_array[divIndex][ulIndex][liIndex]['g-val'] = $(currentLi).attr('g-val');
      graph_array[divIndex][ulIndex][liIndex]['g-color'] = $(currentLi).attr('g-color');
    });
  });
});

console.log(graph_array);

Live Demo

【讨论】：

【解决方案3】：

做这样的事情：-

var graphArray = new Array();
$(".graph ul li").each(function(i) {
    graphArray[i] = $(this).attr("g-color") + ":" + $(this).attr("g-val");
});

alert(graphArray);

【讨论】：