Question

我写了这段代码。它没有用，但有了这个，你应该知道我想要实现的目标

 $('.jfmfs-alpha-separator').filter(function() {
     return ($(this).next().not(".hide-filtered").hasClass("jfmfs-alpha-separator"));
  }).addClass('hide-filtered');

我有相同级别的div数。下面的div与类jfmfs-alpha-separator我有div的数量，然后div jfmfs-alpha-separator和div的数量（注意下面我的意思是在同一级别而不是孩子）。现在当跟随jfmfs-alpha-separator的所有div都获得类.hide-filtered时我也想隐藏那个jfmfs-alpha-separator div。

在我的代码中，我试图在div之后使用类jfmfs-alpha-separator找到下一个div，它没有＆＃39; hide-filtered＆＃39; class并具有jfmfs-alpha-separator类。如果这张支票翻新，我隐藏了那个div。

示例：

<div class ="jfmfs-alpha-separator">Letter A</div>
<div class ="friend hide-filtered">Aaron</div>
<div class ="friend hide-filtered">Aaron</div>
<div class ="friend hide-filtered">Ashutosh</div>
<div class ="jfmfs-alpha-separator">Letter B</div>
<div class ="friend hide-filtered">Bob</div>
<div class ="friend">Baron</div>
<div class ="friend hide-filtered">Batista</div>
<div class ="jfmfs-alpha-separator">Letter C</div> 
<div class ="friend hide-filtered">Carl</div>
<div class ="friend hide-filtered">Chris</div>
<div class ="friend hide-filtered">Charlie</div>
<div class ="jfmfs-alpha-separator">Letter D</div>
...

在上面的示例中，字母A和C应该被隐藏，因为它下面的所有名称都有隐藏过滤的类，而字母B应保持不变。

我如何实现这一目标？

最终解决方案使用Salmans答案：

                     $(".jfmfs-alpha-separator").each(function () {
                        if ($(this).nextUntil(".jfmfs-alpha-separator").not('.hide-filtered').length == 0) {
                            $(this).addClass('hide-filtered');
                        }else{
                            $(this).removeClass('hide-filtered');
                        }
                    });

Answer 1

以下是编写代码的一种方法：

$(".jfmfs-alpha-separator").each(function () {
    // Assume that all elements after a .jfmfs-alpha-separator but
    // before the next .jfmfs-alpha-separator belong to same group
    var siblings = $(this).nextUntil(".jfmfs-alpha-separator");
    // Now that we have all elements that belong to the group
    // use .filter to see if all elements have .hide-filtered class
    if (siblings.filter(":not(.hide-filtered)").length == 0) {
        console.log("should hide -> ", this);
    }
});

很容易将此逻辑转换为.filter(function() {})

Answer 2

尽管Salman A已经为您提供了可行的解决方案，但如果可能的话，您可能需要考虑一些替代方案。

一个替代方案，只有很小的差异，就是将每个字母的div分组，如下所示：

<div class="group">
  <div class="jfmfs-alpha-separator">Letter A</div>
  <div class="friend hide-filtered">Aaron</div>
  <div class="friend hide-filtered">Aaron</div>
  <div class="friend hide-filtered">Ashutosh</div>
</div>
<div class="group">
  <div class="jfmfs-alpha-separator">Letter B</div>
  <div class="friend hide-filtered">Bob</div>
  <div class="friend">Baron</div>
  <div class="friend hide-filtered">Batista</div>
</div>
<div class="group">
  <div class="jfmfs-alpha-separator">Letter C</div> 
  <div class="friend hide-filtered">Carl</div>
  <div class="friend hide-filtered">Chris</div>
  <div class="friend hide-filtered">Charlie</div>
</div>
<div class="group">
  <div class="jfmfs-alpha-separator">Letter D</div>
</div>

然后，您可以根据Salman对此的回答更新您的解决方案：

$(".group").each(function () {
  if ($(this).children(".friend").not(".hide-filtered").length == 0) {
    $(this).addClass('hide-filtered');
  } else {
    $(this).removeClass('hide-filtered');
  }
});

它并没有太大的区别，但我相信这会让HTML和javascript更容易阅读。

就个人而言，我也更愿意用其他元素替换一些div，如下所示：

<div class="group">
  <h1 class="jfmfs-alpha-separator">Letter A</h1>
  <p class="friend hide-filtered">Aaron</p>
  <p class="friend hide-filtered">Aaron</p>
  <p class="friend hide-filtered">Ashutosh</p>
</div>
<div class="group">
  <h1 class="jfmfs-alpha-separator">Letter B</h1>
  <p class="friend hide-filtered">Bob</p>
  <p class="friend">Baron</p>
  <p class="friend hide-filtered">Batista</p>
</div>
<div class="group">
  <h1 class="jfmfs-alpha-separator">Letter C</h1> 
  <p class="friend hide-filtered">Carl</p>
  <p class="friend hide-filtered">Chris</p>
  <p class="friend hide-filtered">Charlie</p>
</div>
<div class="group">
  <h1 class="jfmfs-alpha-separator">Letter D</h1>
</div>

另一种需要大幅度改变的替代方案是实施某种数据模型。如果上面的例子是你网站上唯一一个你这样做的地方，那可能就不值得了，但是如果你在这个地方做这样的事情，那将是一个巨大的节省时间。

基本思想是将这个朋友列表的数据存储在类似数组或嵌套数组（您可能已经在服务器端或客户端）的数据中。然后，您可以通过计算数组中的项来应用显示和隐藏元素的逻辑，而不是计算DOM节点。

KnockoutJS是一个很棒的框架来做这样的事情。我目前在大型网络应用程序上使用它。但请注意，它非常具有阻碍性，我可能不会在没有javascript的情况下使用它。

我确信还有其他更小更简单的js库也可以提供帮助。

Jquery搜索下一个div

2 个答案: