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 ）

Answer 2

http://jsfiddle.net/awesome/3Zjw3/9/

两个jQuery插件，其中包含问题规范的功能：

$(function () {

    // filters out elements that have existing specified CSS classes
    //
    // @param klass_arg [Array] CSS classes to filter
    // @return selection chain
    $.fn.filter_out_klass = function (klass_arg) {
        // raise unless klass_arg is Array
        if (Object.prototype.toString.call(klass_arg) !== '[object Array]') {
            alert('ERROR invalid klass_arg: must be Array');
        }

        // return selections after filter
        // http://api.jquery.com/filter/
        return this.filter(function () {
            $this = $(this);

            // check if any classes defined on elements
            var has_klass = false;
            $.each(klass_arg, function (i, v) {
                if ($this.hasClass(v)) {
                    has_klass = true;
                }
            });
            // return element with no class defined
            return !has_klass;
        });
    };

    // parses response and adds css classes accordingly
    //
    // @param response_arg [Object] like: JSON.parse(json_string)
    // @return selection chain
    $.fn.parse_response = function (response_arg) {
        // raise unless response_arg is Object
        if (Object.prototype.toString.call(response_arg) !== '[object Object]') {
            alert('ERROR invalid response_arg: must be Object');
        }

        // return all selections
        // https://api.jquery.com/jQuery.map/
        return this.map(function () {
            $this = $(this);

            // get client name at hash address from client-id attr
            $name = ((response_arg[$this.attr('client-id')] || {}).name || [])[0];

            // add class 'available' if child element with 'full-name' attribute is found within scope AND child el's 'full-name'-attr equals value
            if ($this.find('[full-name="' + $name + '"]').length) {
                $this.addClass('available');

            // add class 'notavailable' unless specific value: "#N/A"
            } else if ($name !== "#N/A") {
                $this.addClass('notavailable');
            }
            return $this;
        });
    };

    // json string
    $response = '{"clients":{"0":{"name":["#N/A"]},"1":{"name":["Name 2"]},"2":{"name":["Name 3"]},"3":{"name":["Name 3"]}}}';

    // parse json string to hash object and create var with clients node
    $clients = JSON.parse($response).clients;

    // init
    // filter out elements with existing classes from selection , then parse response and perform operations on selection
    $('#list li').filter_out_klass(['available', 'notavailable']).parse_response($clients);
});

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

2 个答案: