Question

我正在尝试从多个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}
       }
    }]

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

Answer 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

Answer 3

做这样的事情： -

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

alert(graphArray);

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

3 个答案:

Live Demo