jquery搜索下一個div

Question

我寫過這段代碼。它不工作，但有了這個，你應該知道我想要實現什麼

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

我有相同級別的div數。下面的div與類jfmfs-alpha-separator我有divs的數量，然後div jfmfs-alpha-separator和divs的數量（注意下面我的意思是在同一級別而不是孩子）。現在當所有遵循jfmfs-alpha-separator的div都得到class .hide-filtered我想隱藏那個jfmfs-alpha-separator div。

在我的代碼我試圖找到類jfmfs-α-分離器，其不具有「隱藏過濾」級，並具有jfmfs-α-分離器類的div後下一格。如果這個檢查retivns真實我隱藏那個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

薩爾曼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> 

然後，您可以更新基於薩爾曼的回答您的解決方案是：

$(".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庫也可以提供幫助。