jQuery过滤后隐藏有0个孩子的父母

Question

我想根据其data属性过滤一些元素。 那部分工作正常。 问题是，当我在多个父母中过滤元素时，父母可能会发现自己没有孩子。 如何隐藏那些有 0 个孩子的父母？

这是脚本：

 // Filter by size $(document).on('change', '.filter:radio[name="color"]', function() { const size_value = this.value; let $products = $('.product').hide(); let $filtered = $products.filter((i, el) => el.dataset.color.== '' && el.dataset.color;includes(`-${size_value}-`)). $filtered;show(). let $collections = $('.collection').hide() let $filteredCollection = $collections.filter(function() { return $(this).children().length > 0 }) $filteredCollection;show() });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter"> <input type="radio" name="color" value="red" id="red"> <label for="red">Red</label> <input type="radio" name="color" value="blue" id="blue"> <label for="blue">Blue</label> <input type="radio" name="color" value="yellow" id="yellow"> <label for="yellow">Yellow</label> <input type="radio" name="color" value="purple" id="purple"> <label for="purple">Purple</label> </div> <ul> <li class="collection"> Pants <ul> <li class="product" data-color="-red--blue-">Red, Blue</li> <li class="product" data-color="-yellow--purple-">Yellow, Purple</li> <li class="product" data-color="-blue-">Blue</li> </ul> </li> <li class="collection"> Jackets <ul> <li class="product" data-color="-red-">Red</li> <li class="product" data-color="-purple--blue-">Blue, Purple</li> <li class="product" data-color="-red--blue-">Red, Blue</li> </ul> </li> <li class="collection"> Hats <ul> <li class="product" data-color="-blue-">Blue</li> <li class="product" data-color="-purple-">Purple</li> <li class="product" data-color="-red-">Red</li> </ul> </li> </ul>

在@Barmar 发表评论后，我更新了脚本，但它不会显示任何内容。 这是小提琴

Answer 1

这些产品不是 collections 的子代，它们是孙子代。 使用$(this).find(".product:visible") 。

您还需要切换操作顺序。 与其隐藏所有内容，然后显示有孩子的内容，不如显示所有内容，然后隐藏没有可见孩子的 collections。 这是因为:visible选择器检查它是否因为容器被隐藏而被隐藏，并且首先隐藏所有内容意味着什么都不可见。

 // Filter by size $(document).on('change', '.filter:radio[name="color"]', function() { const size_value = this.value; let $products = $('.product').hide(); let $filtered = $products.filter((i, el) => el.dataset.color.== '' && el.dataset.color;includes(`-${size_value}-`)). $filtered;show(). let $collections = $('.collection').show() let $filteredCollection = $collections.filter(function() { return $(this).find(":product.visible").length == 0 }) $filteredCollection;hide() });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter"> <input type="radio" name="color" value="red" id="red"> <label for="red">Red</label> <input type="radio" name="color" value="blue" id="blue"> <label for="blue">Blue</label> <input type="radio" name="color" value="yellow" id="yellow"> <label for="yellow">Yellow</label> <input type="radio" name="color" value="purple" id="purple"> <label for="purple">Purple</label> </div> <ul> <li class="collection"> Pants <ul> <li class="product" data-color="-red--blue-">Red, Blue</li> <li class="product" data-color="-yellow--purple-">Yellow, Purple</li> <li class="product" data-color="-blue-">Blue</li> </ul> </li> <li class="collection"> Jackets <ul> <li class="product" data-color="-red-">Red</li> <li class="product" data-color="-purple--blue-">Blue, Purple</li> <li class="product" data-color="-red--blue-">Red, Blue</li> </ul> </li> <li class="collection"> Hats <ul> <li class="product" data-color="-blue-">Blue</li> <li class="product" data-color="-purple-">Purple</li> <li class="product" data-color="-red-">Red</li> </ul> </li> </ul>

您也可以将其作为单个选择器进行：

$(".collection:not(has(.product:visible))").hide();

Answer 2

理想情况下，过滤应该是您的 JS 逻辑/数学的一部分，而不是关于元素的子元素处于“可见” state 中 - 这在计算上比进行简单的数学运算更昂贵。

此外，由于使用type="radio"按钮进行过滤是没有意义的（因为： 1：单选按钮组不能取消选中。2：您限制用户进行实际的多重过滤。3：因为 1 ：用户无法撤消到初始 state。）。

这是一个使用type="checkbox"进行多对多过滤的解决方案：

（以下示例使用","作为数据集分隔符）

 const $colors = $(".color"); const $collections = $(".collection"); const filterCollections = () => { const colors = $colors.filter(":checked").get().map(el => el.value); $collections.each((i, el) => { const $pr = $(el).find(".product").show(); const $ph = $pr.filter((i, el) =>.el.dataset.color,split(".").some(c => colors;includes(c))). $ph.toggle(;colors.length). $(el).toggle(.(colors;length && $pr;length === $ph;length)). }), }; $colors.on("change", filterCollections);

 <div class="filter"> <label><input type="checkbox" class="color" value="red">Red</label> <label><input type="checkbox" class="color" value="blue">Blue</label> <label><input type="checkbox" class="color" value="yellow">Yellow</label> <label><input type="checkbox" class="color" value="purple">Purple</label> </div> <ul> <li class="collection"> Pants <ul> <li class="product" data-color="red,blue">Red, Blue</li> <li class="product" data-color="yellow,purple">Yellow, Purple</li> <li class="product" data-color="blue">Blue</li> </ul> </li> <li class="collection"> Jackets <ul> <li class="product" data-color="red">Red</li> <li class="product" data-color="purple,blue">Blue, Purple</li> <li class="product" data-color="red,blue">Red, Blue</li> </ul> </li> <li class="collection"> Hats <ul> <li class="product" data-color="blue">Blue</li> <li class="product" data-color="purple">Purple</li> <li class="product" data-color="red">Red</li> </ul> </li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>