jQuery如何统计同类不同容器内的item数量并隐藏对应按钮

错误根因 #

• 你代码中使用的$('button.btn')是全局选择器，会匹配页面内所有class为btn的按钮，只要任意一个容器的item数量≤4，就会隐藏所有按钮，这是导致问题的核心原因。
• 额外的HTML规范问题：你的代码中重复使用了id="slider"，id属性在同一个HTML页面中必须唯一，建议将外层容器的id改为class，比如class="slider-box"，避免后续其他逻辑出现异常。

修正后代码 #

不需要修改HTML的前提下，直接调整JS逻辑即可，通过$(this)锁定当前遍历的元素范围，仅操作对应容器内的按钮：

$(".slider").each(function(){
    var numItems = $(this).find("div.item").length;
    if (numItems <= 4) {
        // 先找到当前.slider的父容器，再查找父容器内的btn按钮隐藏
        $(this).parent().find('button.btn').css('display','none');
    }
});

如果先调整外层容器的id为class，逻辑会更直观：
修改后的HTML示例：

<div class="slider-box">
    <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 class="slider-box">
    <button class="btn"></button>
    <button class="btn"></button>
    <div class="slider">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

对应的JS代码：

$(".slider-box").each(function(){
    const itemCount = $(this).find(".item").length;
    if(itemCount <=4) {
        // 直接隐藏当前容器内的所有btn
        $(this).find(".btn").hide();
    }
});

内容的提问来源于stack exchange，提问作者Fernando