如何计算同一类不同容器中的单个项目？

Question

寻找我发现这个question和另一个question的类似问题

但是当我有同一个容器来计算每个容器所拥有的物品时，这对我不起作用，例如：

<div id="slider">
    <button class="btn"></button>
    <button class="btn"></button>
    <div class="slider">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<div id="slider">
    <button class="btn"></button>
    <button class="btn"></button>
    <div class="slider">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

我需要的是能够隐藏小于或等于 4 篇文章的按钮（<div class="item"></div>），我尝试了以下方法，但它隐藏了所有按钮，即使是那些超过 5 篇文章的按钮（ <div class="item"></div>)。

$(".slider").each(function(){
    var numItems = $(this).find("div.item").length;
    if (numItems <= 4) {
        $('button.btn').css('display','none');
    }
});

我需要进行哪些更改才能使其正常工作？

Answer 1

$('button.btn').css('display','none'); 将隐藏所有按钮。要仅隐藏 4 篇或更少文章的滑块内的按钮，请尝试：

$(this).find('button.btn').css('display','none');

解释：$(this) 从.each() 循环中您要到达的滑块开始。然后，.find('button.btn') 仅查找属于该特定滑块的后代的按钮。