each() 如果每个 div 中存在元素数量，则将 class remove 设置为其他 div答案

【问题标题】：each() if number of elements are present in each div, set class remove to other diveach() 如果每个 div 中存在元素数量，则将 class remove 设置为其他 div
【发布时间】：2025-12-16 09:35:01
【问题描述】：

我有一个搜索结果页面。每篇文章都有图片、标题、描述和标签。我希望每篇标签少于 6 个的文章从 div 中添加删除类。

$('.searchTag-container').each(function(){
  cat = $('.searchResult__tag',this).children().length;
  if (cat < 6) { 
    console.log(cat);
    $(".share").addClass("remove");       
  }
});

当我这样做时，即使它有 6 个或更多标签，remove 类也会添加到所有文章中。

<div class="row bottom">
<div class="col-md-8">
    <div class="searchResults">
        <div class="searchTag-container">
            <div class="searchResult__tag " data-number="0">
                <a href="#" class="tag">Tag1</a>
            </div>
            <div class="searchResult__tag" data-number="1">
                <a href="#" class="tag">Tag2</a>
            </div>
            <div class="searchResult__tag" data-number="2">
                <a href="# class="tag">Tag3</a>
            </div>
            <div class="searchResult__tag" data-number="3">
                <a href="#" class="tag">Tag4</a>
            </div>
            <div class="searchResult__tag" data-number="4">
                <a href="#" class="tag">Tag5</a>
            </div>
            <div class="searchResult__tag" data-number="5">
                <a href="#" class="tag">Tag6</a>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 share">
    <div class="social">
        <a class="btn-facebook"><img src="""></a>
        <a class="btn-twitter"><img src=""></a>
        <a class="btn-linkedin"><img src="""></a>
    </div>
</div>

【问题讨论】：

你需要同时提供两行结构让我们知道.searchTag-container和.share之间的关系..无论如何你可以试试$(this).closest(".row").find(".share").addClass("remove");

标签： javascript jquery

【解决方案1】：

您的代码工作正常，但错误是您正在循环通过 .searchTag-container，它只会迭代一次并且您正在检查 .searchResult__tag 的长度，

所以在.searchTag-container 中有 6 个.searchResult__tag，每个都有一个孩子，所以它给出了所有.searchResult__tag 的孩子的总长度，所以它变成了 6，所以变量 cat = 6 并且它给出 false 时你检查cat < 6。

因此，为了解决它，您必须像我一样遍历每个 .searchResult__tag 的循环并检查它的子项长度，

查看以下问题的有效解决方案：

$(function(){
$('.searchTag-container .searchResult__tag').each(function(){
  cat = $(this).children().length;
  if (cat < 6) { 
    console.log(cat);
    $(".share").addClass("remove");       
  }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bottom">
<div class="col-md-8">
    <div class="searchResults">
        <div class="searchTag-container">
            <div class="searchResult__tag " data-number="0">
                <a href="#" class="tag">Tag1</a>
            </div>
            <div class="searchResult__tag" data-number="1">
                <a href="#" class="tag">Tag2</a>
            </div>
            <div class="searchResult__tag" data-number="2">
                <a href="#" class="tag">Tag3</a>
            </div>
            <div class="searchResult__tag" data-number="3">
                <a href="#" class="tag">Tag4</a>
            </div>
            <div class="searchResult__tag" data-number="4">
                <a href="#" class="tag">Tag5</a>
            </div>
            <div class="searchResult__tag" data-number="5">
                <a href="#" class="tag">Tag6</a>
            </div>
        </div>
    </div>
</div>
<div class="col-md-4 share">
    <div class="social">
        <a class="btn-facebook"><img src=""></a>
        <a class="btn-twitter"><img src=""></a>
        <a class="btn-linkedin"><img src="""></a>
    </div>
</div>

【讨论】：

【解决方案2】：

你可以试试下面的脚本：

$('.searchTag-container').each(function(){
cat = parseInt($('.searchResult__tag',this).children().length);
if (cat < 6) {    
$(this).closest(".row").children(".share").addClass("remove");
 console.log(cat);
}
});

检查这个fiddle

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

要选择具有特定班级的孩子，我会使用 $(this).children('.searchResult__tag') 并像以前一样使用 .length 来获取其长度

【讨论】：