检查所有元素的属性并修改另一个元素

Question

This is how my html looks,

<tr id="group-1-11">
<tr class="child-of-group-1-11 " selected-group="1" >
<tr id="group-1-12" class="child-of-group-1-11" parent-id="group-1-11"  selected-group="1">
<tr class="child-of-group-1-12" parent-id="group-1-12"  selected-group="1">
<tr class="child-of-group-1-12" parent-id="group-1-12"  selected-group="1">
<tr class="child-of-group-1-11" selected-group="1" >
<tr id="group-1-85" class="child-of-group-1-11" parent-id="group-1-11" >
<tr class="child-of-group-1-85" selected-group="1" style="display: none;">
<tr id="group-1-355" class="child-of-group-1-85" parent-id="group-1-85" selected-group="1">
<tr id="group-1-2" class="child-of-group-1-11  parent " parent-id="group-1-11">

now what is my problem is that I need to check if the element with class child-of-id have property selected-group="1" and if all of the child-of-id have the property then add new property(checked,true) to element with that particular id.

// I have an array of ids
// var uniqueParentArray = ['group-1-11', 'group-1-12', 'group-1-85',...];
$.each(uniqueParentArray, function(index, parentId) {
            var allSelected = $('.child-of-'+parentId).each(function(){
                var selectedGroup = $(this).attr('selected-group');
                if(selectedGroup != '1')
                    return false;
                return true;
            });
            if(allSelected) {
                $('#'+parentId).attr("checked", true);
            }
      });

That means by the end my result should be something like:

 <tr id="group-1-12" class="child-of-group-1-11" parent-id="group-1-11"  selected-group="1" checked="true">
 <tr id="group-1-85" class="child-of-group-1-11" parent-id="group-1-11" checked="true">

but element with id = "group-1-11" should not have that attribute checked = "true"

I hope the context was clear. I probably have a bug in the script, hence result output is not as expected. Please help me fix the bug, I was expecting allSelected to be boolean but I probably am not very familiary with the methodology.

Answer 1

.each() does not function as you want it to. You need to create a variable before your call to .each() , and then modify the variable if you encounter the condition you're looking for.

$.each(uniqueParentArray, function(index, parentId) {
    var allSelected = true;
    $('.child-of-'+parentId).each(function(){
        var selectedGroup = $(this).attr('selected-group');
        if(selectedGroup != '1') {
            allSelected = false;
        }
    });
    if(allSelected) {
        $('#'+parentId).attr("checked", true);
    }
});

This code will loop through all .child-of-(parentID) elements. If any of them do not have selected-group="1" , then allSelected will be false when the loop completes.

On a more general note, I would recommend using data- attributes for non-standard HTML attributes. This way your markup remains valid.

Answer 2

return true in jQuery .each is the same thing as continue; in a for loop. return false is the equivalent of break; . None of these will be used as return values for the iteration, and passed to allSelected . You might be looking at something like .filter rather than .each , which is a reduce, where returning false would mean that the element is excluded from the list.

Something like this might do the trick:

$('#' + uniqueParentArray.join(', #')).attr('checked', function() {
   return $('.child-of-' + $(this).attr('id')).filter(function() {
      return $(this).attr('selected-group') != '1';
   }).length == 0;
});

Answer 3

You can try something like:

$.each(uniqueParentArray, function(index, parentId) {
    // retrieve not selected elements for the given parent
    var notSelectedElements = $('.child-of-'+parentId+'[selected-group!="1"]');
    // if all elements are selected
    if(notSelectedElements.length === 0) {
         $('#'+parentId).attr("checked", true);
    }
});