0

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

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

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

在我的代码中，我试图在具有 jfmfs-alpha-separator 类的 div 之后找到下一个 div，该类没有“隐藏过滤”类并且具有 jfmfs-alpha-separator 类。如果此检查返回 true，我将隐藏该 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');
                        }
                    });
4

2 回答 2

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() {})

于 2012-12-03T06:50:24.583 回答
0

尽管 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 库也可以提供帮助。

于 2012-12-03T08:44:35.543 回答