Sprawdź, czy wszystkie elementy mają tę samą klasę

Question

Zbudowałem stronę FAQ z opcją ukrycia i wyświetlenia zawartości pod każdym pytaniem. Mam funkcję "Rozwiń wszystkie", która pozwala użytkownikowi wyświetlić wszystkie pytania na stronie. Po rozszerzeniu pytania otrzymuje klasę "wybraną".

Próbuję zmienić status "Rozwiń wszystkie", gdy wszystkie pytania (LI) są rozszerzone.

Jak mogę sprawdzić, czy wszystkie LI mają wybraną KLASĘ w tym samym czasie?

Używam metody EACH, aby uzyskać LI i ich CLASS.

góry dzięki

Answer 1

Prawdopodobnie można policzyć elementy listy z selected klasy wobec wszystkich elementów listy:

if ($("#questions li.selected").length == $("#questions li").length) { 
    // all list items are selected 
} 

#questions jest elementem, który zawiera listę i oczywiście może być inna w Twoim kod, ale powinieneś dostać pomysł.

Answer 2

Wybierz wszystkie elementy listy, odfiltrować elementy należące do danej klasy, a następnie ustalić, czy są jakieś pozostały:

if($("li").not(".className").length > 0) { 
    //code 
} 

Answer 3

Nie jestem pewien, aby zrozumieć problem, ale sprawdzić, czy Obiekt jQuery ma klasę, używasz .hasClass().

Answer 4

Można porównać liczbę elementów li z liczbą elementów li z klasą "wybraną". Jeśli te liczby są takie same, to wszystkie li elementy mają tę klasę:

if($("li").length == $("li.selected").length) { 
    //All li elements have class selected 
} 

Można to zrobić w dowolnym momencie, nie trzeba iść wewnątrz pętli each.

Answer 5

Kiedy rozumiem, że masz rację, chcesz ustawić klasę selected dla wszystkich swoich elementów li po kliknięciu przycisku Pokaż wszystko?

Nie trzeba powtarzać siebie nad wszystkimi elementami li.

Wystarczy je wybrać i zadzwonić addClass na nich:

$('li').addClass('selected'); 

Answer 6

$("li:not(.selected)").length 

nie daje liczbę <li> s, które nie mają „wybrany” klasę. Jeśli ta liczba wynosi zero, możesz uruchomić swoją logikę.

Answer 7

Albo można spróbować z size()

if($("li.success").size() == $("li").size()){ 
    //return true 
}