jQuery alle nächstens Elemente mit Klassennamen finden?
Ich habe als Beispiel folgenden HTML-Aufbau, welchen ich leichter nicht ändern kann.
Ziel später ist es wenn man auf eine category klickt, dass alle sub-category´s aus- oder eingeblendet werden.
Wie bekomme ich nur die Elemente unter der category ohne dabei auch alle sub-categorys der anderen categorys mit auszuwählen? (Die Anzahl der sub-category´s ist nicht immer gleich)
<div class="container">
<div class="category"> Kleidung </div>
<div class="sub-category"> Hose </div>
<div class="sub-category"> Pulli </div>
<div class="category"> Essen </div>
<div class="sub-category"> Bananen </div>
<div class="sub-category"> Äpfel </div>
<div class="sub-category"> Birnen </div>
<div class="category"> Getränke </div>
<div class="sub-category"> Cola </div>
<div class="sub-category"> Fanta </div>
<div class="sub-category"> Bier </div>
<div class="sub-category"> Wasser</div>
</div>
2 Antworten
![](https://images.gutefrage.net/media/user/Gho5txx/1591016531836_nmmslarge__45_17_420_420_ffa4b6977bed9c8eab091759832ee8a5.jpg?v=1591016532000)
https://jsfiddle.net/zo4m8xea/1/
Das dürfte dir helfen
Das stück JS sucht sich alle nachfolgenden Elemente. Sobald es auf eine "category" trifft, wird abgebrochen. Die bis dahin gefundenen werden Sichtbar/Unsichtbar geschaltet.
$(".category").on("click", e => {
$(e.currentTarget).nextAll().each(function() {
if ($(this).hasClass("category")) {
return false;
} else {
$(this).toggleClass('show');
}
});
});
![](https://images.gutefrage.net/media/default/user/15_nmmslarge.png?v=1551279448000)
Der Code ist leicht nachvollziehbar, Danke dir vielmals. Umsetzung funktioniert auch einwandfrei.
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Du kannst so vorgehen:
$(".category").on("click", evt => {
$(evt.currentTarget).nextAll().each((_, el) => {
const element = $(el);
if (element.hasClass("sub-category")) {
element.toggleClass("visible");
}
else if(element.hasClass("category")) {
return false;
}
});
});
Es wird über alle Elemente mit der Klasse category iteriert, jedem Fund wird ein Klick-Handler zugewiesen. Bei Klick auf ein Element mit der Klasse category, werden die folgenden Nachbarn dieses Elements durchlaufen. Handelt es sich um eine Subkategorie, wird diesem entweder die CSS-Klasse visible hinzugefügt oder (wenn sie bereits existiert) wieder genommen. Beim ersten Vorkommen einer anderen Kategorie bricht die Schleife ab.
In deinem CSS-Teil kannst du folgend diese Regeln formulieren:
.sub-category { display: none }
.sub-category.visible { display: block }
![](https://images.gutefrage.net/media/default/user/15_nmmslarge.png?v=1551279448000)
Interessanter Ansatz und vielen Dank so funktioniert es Einwandfrei!