Kinder von $(this) in jQuery: Wie man sie erhält und nicht durcheinanderkommt

Wie erhält man die Kinder von $(this) in jQuery? Einfach erklärt

Stellen Sie sich vor: Sie schreiben eine interaktive Tabelle auf einer Website. Der Benutzer klickt auf eine Zeile, und Sie müssen genau deren Zellen hervorheben, ohne die benachbarten zu berühren. Oder Sie erstellen ein Dropdown-Menü – ein Klick auf die Überschrift soll nur deren Unterpunkte anzeigen. In beiden Fällen stellt sich die Frage: „Wie erhalte ich die Kind-Elemente des Elements, auf das ich gerade geklickt habe?“

Diese Frage ist ein echter Hit auf Stack Overflow. Tausende Entwickler, vom Anfänger bis zum Profi, suchen nach der Antwort. Und das ist kein Wunder: Die Arbeit mit $(this) und seinen Kindern ist eine Grundlage, ohne die man nicht auskommt. Heute klären wir ein für alle Mal, wie man das richtig, schön und fehlerfrei macht.

Warum ist $(this).children() kein Allheilmittel?

Die naheliegendste Methode ist children(). Sie gibt nur direkte Nachkommen zurück (erste Verschachtelungsebene). Klingt logisch, aber oft erwarten Anfänger davon Magie, die es nicht gibt.

// HTML:\n// <div id="parent">\n//   <span>Direkter Nachkomme</span>\n//   <div>\n//     <span>Verschachtelter Nachkomme (wird nicht zurückgegeben)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // Gibt nur den ersten <span> und <div> zurück\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

Wichtig: children() schaut nicht in verschachtelte Blöcke hinein. Wenn Sie alle Nachkommen beliebiger Tiefe benötigen – verwenden Sie find().

Methode Nr. 1: Der Klassiker – $(this).children()

Wann verwenden: Wenn Sie nur Elemente direkt innerhalb des aktuellen Blocks benötigen. Zum Beispiel haben Sie eine Liste <ul> und möchten deren <li> durchlaufen.

// Beispiel: Klick auf einen Produktcontainer\n$('.product-card').on('click', function() {\n  // Alle direkten Kind-Elemente der Karte erhalten\n  let kids = $(this).children();\n  \n  // Durchlaufen und etwas tun\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

Besonderheit: Sie können direkt im Aufruf nach einem Selektor filtern:

// Nur <div> innerhalb des aktuellen Elements\nlet divsOnly = $(this).children('div');

Methode Nr. 2: Tiefensuche – $(this).find()

Wann verwenden: Wenn die Struktur verschachtelt ist und Sie alle Elemente mit einer bestimmten Klasse oder einem bestimmten Tag benötigen, unabhängig von der Tiefe. Zum Beispiel alle Bilder innerhalb eines Artikels finden.

// Klick auf einen Nachrichtenblock\n$('.news-block').on('click', function() {\n  // Alle <img> darin finden, auch wenn sie in Unterüberschriften sind\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // Jedem Bild einen Rahmen hinzufügen\n    $(this).css('border', '2px solid red');\n  });\n});

Unterschied zu children(): find() durchläuft den gesamten DOM-Baum innerhalb des Elements. children() – nur die erste Ebene. Merken Sie sich die Regel: „Kinder sind Kinder. Find sind alle Nachkommen bis zur siebten Generation.“

Methode Nr. 3: Nativer JavaScript – ohne jQuery

Und was, wenn Sie in reinem JS schreiben oder die Abhängigkeit von Bibliotheken verringern möchten? $(this) hat ein „nativen“ Gegenstück – this im Event-Handler. Und auch das hat Kinder!

// Reines JavaScript\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // Direkte Kinder erhalten\n    let children = this.children; // HTMLCollection\n    \n    // Zur Vereinfachung in ein Array umwandeln\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // Oder alle Nachkommen per Selektor suchen\n    let allSpans = this.querySelectorAll('span');\n  });\n});