使用jQuery按類別過濾列表項目

我正在修改現有網站的A-Z目錄，它是使用jQuery過濾的列表。點擊全部顯示所有部門。每個部分A-Z都分組在他們自己的div中，並且有一個匹配的類，例如，所有以A開頭的部門都有一個帶有「A」類的div。使用jQuery按類別過濾列表項目

我需要以相同的方式過濾出列表中的其他項目組，當點擊GILROY。我已將類「gilroy」添加到這些列表項中。

花了幾個小時試圖破解類似的例子，使用過濾我意識到我只是不明白如何正確編碼它，它是一個時間敏感的項目。任何協助或指向正確的方向將不勝感激。

我正在修改的現有代碼如下所示，請參閱jsfiddle鏈接以獲取css & html。

$(document).ready(function() { 
    $('ul#letterlist a').click(function() { 
     $(this).css('outline','none'); 
     $('ul#letterlist .current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     var filterVal = $(this).text().toUpperCase().replace(' ','-'); 

     if(filterVal == 'ALL') { 
      $('div#departments div').addClass('column'); 
      $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden'); 
     } else { 
      $('div#departments div.column').fadeIn('fast').removeClass('column'); 

      $('div#departments div div').each(function() { 
       if(!$(this).hasClass(filterVal)) { 
        $(this).fadeOut('fast').addClass('hidden'); 
       } else { 
        $(this).fadeIn('fast').removeClass('hidden'); 
       } 
      }); 
     } 

     return false; 
    }); 
});

jsfiddle

來源

2013-02-21 kaemak

這段代碼將永遠不會用於你想要的子搜索，因爲'gilroy'類在'list item'上，而且你甚至從來沒有對列表項進行過濾...... – Ohgodwhy 2013-02-21 20:26:11

如果你打算在你的問題中鏈接一個jsfiddle，它應該是一個分叉或其他東西。您正在對其進行更改，例如，使我的原始答案無效。 – ach 2013-02-21 20:54:53

感謝您的提示，編輯上面的鏈接。 – kaemak 2013-02-21 21:55:37

添加另一種情況你if-then-else爲GILROY。在這種情況下，顯示所有內容，就像ALL一樣，但隱藏除.gilroy類li元素以外的所有元素，使用.not('.gilroy')。確保show()所有在每個變化li要素的重新設置過濾器：

$('div#departments li').show(); 
if(filterVal == 'GILROY') { 
    $('div#departments div').addClass('column'); 
    $('div#departments li').not('.gilroy').hide(); 
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden'); 
} else if(filterVal == 'ALL') { 
    $('div#departments div').addClass('column'); 
    $('div#departments div div.hidden').fadeIn('fast').removeClass('hidden'); 
} else { 
    ... 
}

演示：http://jsfiddle.net/8u26c/

來源

2013-02-21 20:29:59

謝謝！這很好，但是我需要隱藏任何沒有類名「gilroy」的特殊div內的列表項上的h5。例如：'

B

' – kaemak 2013-02-21 23:51:36

我有一種感覺，你可能需要這個。我在這裏做了一個例子：http://jsfiddle.net/66eSB/我有腳本在加載時爲每個組添加一個'nogilroy'類，但沒有'li.gilroy'。（實際上將它添加到全部，然後用'li.gilroy'將它從任何組中刪除）然後，我只隱藏'.nogilroy'組作爲過濾器的一部分。還有其他一些方法可以做到這一點，包括重新安排您的HTML。這是一種方法。 – 2013-02-22 17:50:22

這是一個稍微好一些的評論版本：http://jsfiddle.net/66eSB/1/當用戶點擊太快時，它會處理一些動畫問題。 – 2013-02-22 18:02:18

這應該與「吉爾羅伊」，你可能決定添加任何其他類似過濾器工作。你可以有一個空div與GILROY類和空ul（這似乎已經在早期版本中您的jsfiddle的存在），然後添加下面的代碼片段在else塊：

if (filterVal.length > 1) { //can hard-code this to check for "GILROY" instead, if you want 
    var targetList = $('div.' + filterVal + ' ul'); 
    $('li.' + filterVal.toLowerCase()).each(function() { 
     targetList.append($(this)); 
    });     
}

演示：http://jsfiddle.net/82Vmw/

來源

2013-02-21 20:45:08 ach

使用jQuery按類別過濾列表項目

回答

B

相關問題