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>

Answer 1

[Gho5txx]

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');
    }
  });
});

Woher ich das weiß: Berufserfahrung

Comments

[zakali]

Der Code ist leicht nachvollziehbar, Danke dir vielmals. Umsetzung funktioniert auch einwandfrei.

Answer 2

[regex9]

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 }

Comments

[zakali]

Interessanter Ansatz und vielen Dank so funktioniert es Einwandfrei!