javascript - 迭代 DOM 和 JSON 响应的最佳实践

Question

我正在尝试迭代 DOM 和 JSON 响应，并将 CSS 类添加到列表项(如果它位于该 JSON 上)。

这是一个fiddle example ，任何人都可以帮忙正确地做到这一点吗？看来我的做法不太好。

    $('#list li').each(function(){
         if ($(this).children().first().next().attr('child-name') == val.name[0] && ($(this).children().first().next().parent().hasClass('available') == false || $(this).children().first().next().parent().hasClass('notavailable') == false)) { 
       $(this).addClass("available");
 } else if (($(this).children().first().next().parent().hasClass('available') == false || $(this).children().first().next().parent().hasClass('notavailable') == false) && val.name[0] != "#N/A") {
       $(this).addClass("notavailable");
}
});

因此，尝试在此处添加一个类:

如果 json 中没有

<li data-id="id-4" client-id="4" class="myclass notavailable"><!-- Conent here --></li>

如果是在json中

<li data-id="id-4" client-id="4" class="myclass available"><!-- Conent here --></li>

Answer 1

我认为问题出在 json 的嵌套上。看来您有一个包含 1 个元素的 json 数组“clients”我尝试编辑您的 json 格式:

var response = 
    {
     "clients": [
      {"0":{"name":"Name 1"},
       "1":{"name":"Name 2"},
       "2":{"name":"Name 3"},
       "3":{"name":"Name 3"}
      }]
    };

(如果我对 json 数据的解释是正确的)-那么您可以通过以下方式获取数据，最好构造一个关联对象数组，然后您可以轻松地从 dom 循环中引用它:

var results = new Array();

jQuery.each(response['clients'][0], function(i, val) {
    results[i] = val.name;
});

$('#list li').each(function () {
    if (results[$(this).attr("client-id")] == undefined) {
        $(this).addClass("notavailable");
    } else {
        $(this).addClass("available");
    }
});

<小时/>

这是一个正在运行的 working jsfiddle 。 (仅更改 javacript)

<小时/>