如何使用相同的标记创建多个 jQuery 同位素过滤器？

Question

我正在尝试创建两个包含相同标记的单独过滤器。问题是当我单击第一个块上的任何过滤器时，它也会过滤第二个块中的项目。如何设置同位素以过滤同一块上的项目？

下面是我的 HTML 和 jQuery 代码。

<div class="callists">

    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-id="0">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>


<div class="callists">

    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-id="0">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

<!-- These two .callists blocks are more or less same with same item classes. -->


<script>
    var $grid = $(".filgrid");
    $grid.isotope({
        itemSelector: ".filgriditem",
        resizesContainer: true,
        resizable: true,
    });
    $(".relfila").click(function(e){
        e.preventDefault();
        
        var ITfilterClass = $(this).attr("data-filter");
        $(this).parents('ul').find('li').removeClass("active");
        $(this).parent().addClass("active");
        
        $grid.isotope({
            filter: ITfilterClass
        });
    });
</script>

您能否指导我如何在单击

.relfila

时过滤项目，它仅过滤同一

.callists

块内的项目？

Answer 1

请立即尝试：

我更新了 html 代码，每个 filgrid 和 filterlistul 都有一个唯一的 data-gridid：

<div class="callists">
    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-filter="*">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

<div class="callists">
    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="1">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-filter="*">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid1" data-gridid="1" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

我按照上面的 html 修改更新了 jQuery 代码：

$(document).ready(function () {
    $(".filgrid").each(function () {
        var $grid = $(this);
        $grid.isotope({
            itemSelector: ".filgriditem",
            resizesContainer: true,
            resizable: true,
        });
    });
    $(".relfila").click(function (e) {
        e.preventDefault();

        var ITfilterClass = $(this).attr("data-filter");
        var gridId = $(this).closest("ul").attr("data-gridid");
        $(this).parents('ul').find('li').removeClass("active");
        $(this).parent().addClass("active");
        $(".filgrid[data-gridid=" + gridId + "]").isotope({
            filter: ITfilterClass
        });
    });
});