如何为页面中的每个元素隔离相同的脚本-jquery

我在同一页面上有多个包含“卡片”的块，当我单击showmore时，其中一些块不可见。 如何为每个元素隔离相同的脚本？ 这是我的代码：- HTML

---

现在，当我单击showmore按钮时，这将显示页面中的所有卡片

您所说的“为每个元素隔离相同的脚本”是什么意思？你到底想达到什么目的？是否希望“显示更多”只显示一张卡？@pablito.aven no pablito当我单击“显示更多”时，我将只看到与showmore相同容器中的卡您的代码似乎工作正常。看看我用它做的这把小提琴：也许你可以用JSFIDLE或类似的工具来重现你的问题？你说的“为每个元素隔离相同的脚本”是什么意思？你到底想达到什么目的？是否希望“显示更多”只显示一张卡？@pablito.aven no pablito当我单击“显示更多”时，我将只看到与showmore相同容器中的卡您的代码似乎工作正常。看看我用它制作的这把小提琴：也许您可以用JSFIDLE或类似的工具复制您的问题？

<div class="container_block">
<div class="card_container">
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="showmore_cards">show more</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
</div>

<div class="container_block">
<div class="card_container">
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="single_card">...</div>
    <div class="showmore_cards">show more</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
    <div class="single_card card_visible">...</div>
</div>

$('.showmore_cards').click(function() {
    var thisItem = $(this);
    $(this).parents('.card_container').find('.single_card').each(function(index) {
        if ($(this).hasClass('card_visible')) {
            $(this).show();
        }
        thisItem.hide();
    });
});