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

Check all elements for an attribute and modify another element

本文关键字：元素 修改 另一个 属性 检查      更新时间：2023-09-26

这就是我的html的样子，

<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">

现在我的问题是我需要检查具有类 child-of-id 的元素是否具有属性 selected-group="1"，如果所有 id 的孩子都具有该属性，则添加新属性（选中，true）到具有该特定 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);
            }
      });

这意味着到最后我的结果应该是这样的：

 <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">

但是带有id = "group-1-11"的元素不应该具有该属性checked = "true"

我希望背景是清楚的。我的脚本中可能有一个错误，因此结果输出与预期不符。请帮我修复错误，我期待allSelected是布尔值，但我可能对该方法不是很熟悉。

.each()不能按预期运行。您需要在调用 .each() 之前创建一个变量，然后在遇到要查找的条件时修改该变量。

$.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);
    }
});

此代码将遍历所有.child-of-(parentID)元素。如果它们中的任何一个没有selected-group="1"，则当循环完成时allSelected将为假。

在更一般的注释中，我建议对非标准HTML属性使用data-属性。这样，您的标记仍然有效。

jQuery .each中的return true与 for 循环中的continue;相同。 return false相当于break;。这些都不会用作迭代的返回值，并传递给allSelected 。您可能正在查看类似 .filter 而不是 .each 的东西，这是一个归约，其中返回 false 意味着该元素被排除在列表中。

像这样的东西可能会解决问题：

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

你可以尝试这样的事情：

$.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);
    }
});
相关文章：