迭代数组并使用js或jquery追加到html的更好方法

时间:2017-06-10 19:16:54

标签: javascript jquery html arrays

我想知道是否有更短/更好的方法来迭代包含{key:[array],key2:[array]}

的数组
var ray = {'A':['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
'B': ['m', 'n', 'b', 'v', 'c', 'x', 'z'],
'C': ['o', 'i', 'd', 'f', 'j', 'a', 'l', 'a', 'd']
}

目前我有

    function(data) {
        var ray = data.result;
        $.each(ray, function() {
          if(this == ray.A){
            $.each(this, function(i, v) {
              $("#list1").append('<span class="tag">' + v + "</span>");
            });
          }
          if(this == ray.B){
            $.each(this, function(i, v) {
              $("#list2").append('<span class="tag2">' + v + "</span>");
            });
          }

        });
    }

等。

有没有更好的方法来做到这一点,没有过多的重复?

2 个答案:

答案 0 :(得分:1)

使用$("#list"+j).append循环,因为list具有相同名称。

&#13;
&#13;
var ray = {'A':['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
'B': ['m', 'n', 'b', 'v', 'c', 'x', 'z'],
'C': ['o', 'i', 'd', 'f', 'j', 'a', 'l', 'a', 'd']
}
    function arr() {
        var j=0;
        $.each(ray, function() {
            j++;
            $.each(this, function(i, v) {
              $("#list"+j).append('<span class="tag">' + v + "</span>");
            });
        });
    }
    
    arr();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list1">
</div>
<div id="list2">
</div>
<div id="list3">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

根据您的数据类型,您通常可以执行以下操作...

{{1}}