Javascript 仅在父容器中的元素上单击

我想在单击a.bc-pagination-next时首先显示元素li.bc-cate-has-child.first，并在单击a.bc-pagination-next时将其隐藏

下面的脚本可以工作，但单击将显示/隐藏两个容器中的所有匹配元素，如何保持单击以仅影响父容器中的元素

脚本：

$(document).ready(function () {
    $('.bc-list-wrap').each(function () {
        $("a.bc-pagination-next").click(function () {
            $("li.bc-cate-has-child.first").hide();
        })

        $("a.bc-pagination-prev").click(function () {
            $("li.bc-cate-has-child.first").show();
        })
    });
});

HTML:

你能行

$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();

及

---

参考

您需要使用当前元素上下文，即此上下文，并遍历DOM以目标元素为目标，然后对其执行所需的操作

您可以使用来跟踪到公共祖先，然后可以使用它来定位元素

$(document).ready(function () {
    $('.bc-list-wrap').on("click", "a.bc-pagination-next", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();
    })

    $('.bc-list-wrap').on("click", "a.bc-pagination-prev", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show();
    })
});

$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show()

$(document).ready(function () {
    $('.bc-list-wrap').on("click", "a.bc-pagination-next", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();
    })

    $('.bc-list-wrap').on("click", "a.bc-pagination-prev", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show();
    })
});

$(document).ready(function () {
    $('.bc-list-wrap').each(function () {
        $('a.bc-pagination-next').click(function () {
            $(this).parents('.bc-list-wrap').find('li.bc-cate-has-child.first').hide();
        })

        $('a.bc-pagination-prev').click(function () {
            $(this).parents('.bc-list-wrap').find('li.bc-cate-has-child.first').show();
        })
});