我想根据内部div的名称属性组合多个jquery过滤器并隐藏父div答案

【问题标题】：I want to combine multiple jquery filter and hide parent div according to inner div's name attribute我想根据内部div的名称属性组合多个jquery过滤器并隐藏父div
【发布时间】：2018-03-19 22:24:50
【问题描述】：

我不是 jquery 专家，我对 filter() 方法有疑问，有什么帮助吗？

我有一个容器 div，其中包含以下 2 个其他 div，但容器 div 的数量是动态的。

<div class="container">
  <div class="city" name="64">London</div>
  <div class="region" name"7">some region</div>
</div>

<div class="container">
 <div class="city" name="65">Paris</div>
 <div class="region" name"8">other region</div>
</div>
 .
 .
 .
 .
<div class="container">
 <div class="city" name="165">some city</div>
 <div class="region" name"58">another region</div>
</div>

我想要做的是使用 jquery 根据内部 div 的名称属性过滤这些 div.container。我有两个选择框，它们具有与每个内部 div 的名称属性相同的数据。当在第一个选择框选择一个值（与内部 div.city 的名称属性相同）时，我想隐藏除内部 div.city 的名称属性之外的所有父（.container）div 与我在选择框中选择的相同。

这部分我已经做了:)

我不能是关于第二个选择框。如果我尝试在第二个选择框中做同样的事情，那么只有一个过滤器起作用。我如何结合以下代码？我的 jquery 如下：（#liste_tur_filter --> 我的第一个选择框） (#liste_il_sec_filter --> 我的第二个选择框)

    <script>
    $(document).on('change','#liste_tur_filter', function(){

        filter_1_value = $('#liste_tur_filter').val();

        $('.urun_container').hide();

        $('.liste_tur')
            .filter('[name="'+ filter_1_value +'"]')
            .parent().show(); // show the filtered elements

    });
</script><!--liste türü filtresi-->

<script>
    $(document).on('change','#liste_il_sec_filter', function(){

        filter_2_value = $('#liste_il_sec_filter').val();

        $('.urun_container').hide();

        $('.sehir')
            .filter('[name="'+ filter_2_value +'"]')
            .parent().show(); // show the filtered elements

    });
</script>

我该如何组合这些？（如果我不能清楚地问我的问题我很抱歉）

提前谢谢...

【问题讨论】：

从您逻辑中的选择器到您提供的标记，我很难看出两者之间的关系。

标签： jquery filter

【解决方案1】：

您可以在两个过滤器上设置监听器，hide() 只需设置一次。

<script>
    $(document).on('change','#liste_tur_filter, #liste_il_sec_filter', function(){

        var filter_1_value = $('#liste_tur_filter').val();
        var filter_2_value = $('#liste_il_sec_filter').val();

        $('.urun_container').hide();

        $('.liste_tur')
            .filter('[name=' + filter_1_value + ']')
            .parent().show();

        $('.sehir')
            .filter('[name=' + filter_2_value + ']')
            .parent().show();
    });
</script>

【讨论】：

谢谢你的回答，但我不明白我应该做什么，有什么例子吗？我也在找，但还没找到。
上面的代码我已经写好了。在两个过滤器上都设置了侦听器，在hide() 之后，两个结果都会同时显示。
很抱歉，我尝试过这样的事情并错过了您的代码。但是由于把 "})" 放在 parent().show(); 之前您的代码不起作用？我们是否在其他地方添加了一些东西？
你是对的。还有一些额外的引号、双引号和括号。我全部删除了。请再次检查
所以...我已经尝试过这个解决方案，但它不是我想要的。此解决方案用作“或”意味着它显示 与 #liste_tur_filter 匹配的结果 和 与 #liste_il_sec_filter 匹配的结果 我想在 ** 上应用 #liste_il_sec_filter* #liste_tur_filter 结果。

【解决方案2】：

在第二个侦听器中，不要再次隐藏所有元素，而是使用 not equal != 选择器隐藏那些没有您想要的名称的元素：

$(document).on('change','#liste_tur_filter', function(){
    filter_1_value = $('#liste_tur_filter').val();
    $('.urun_container').hide();
    $('.liste_tur').filter('[name='+ filter_1_value +']').parent().show();
});

$(document).on('change','#liste_il_sec_filter', function(){
    filter_2_value = $('#liste_il_sec_filter').val();
    $('.sehir').filter('[name !='+ filter_2_value +']').parent().hide()
     })
});

【讨论】：

【解决方案3】：

谢谢@Ali Sheikhpour。我找到了；

<script>
 $(document).on('change','#liste_tur_filter, #liste_il_sec_filter', function(){

   filter_1_value = $('#liste_tur_filter').val();
   filter_2_value = $('#liste_il_sec_filter').val();

     $('.urun_container').show();

   if(filter_1_value != null)
   $('.liste_tur').filter('[name!='+ filter_1_value +']').parent().hide();

   if(filter_2_value != null)
   $('.sehir').filter('[name!='+ filter_2_value +']').parent().hide();

           });
 </script>

【讨论】：