Alle Klassen eines Objects
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansprechen
anzahl
array
ast
ausgeben
beschreibung
code
dom
element
elternteil
funktion
index
jemand
klasse
objekt
problem
stammen
test
url
zweig
-
Hi,
mit jquery kann man ja leicht alle Klassen ausgeben lassen. ist es möglich, sich alle Klassen eines Objects ausgeben zu lassen?
html
<div id="test"> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> </div>
JS / JQuery
//Ausgabe der Anzahl der Klassen (c1) [u]innerhalb [/u]des Objects mit hier ID: #test alert($('#test').$('.c1').length);
Leider funktioniert das so nicht :(
Hat jemand eine idee woran das liegen könnte?
(bei Google konnte ich nichts finden, da ich nicht genau wusste wonach ich suchen muss. 'alle Klassen eines Objects' hat mich nicht weiter gebracht. Wer also trffer findet würde mich auch sehr freuen!)
MFG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du möchtest alle Unterobjekte ansprechen, das ginge so:
$('#test div').each( function( index ) { alert( this.attr('class'); } );
Damit solltest du erreichen, was du willst. Du nimmst dabei JEDE div, welche ein Unterelement von #test ist, und behandelst sie mit der Funktion.
Liebe Grüße -
Wie wäre es einfach so:
var anzahl = $('#test > .c1').length; -
Vielen Dank, ich versuche ggamee Variante gerade und schreib dann obs klappt.
@hackyourlife:
hackyourlife schrieb:
Wie wäre es einfach so:var anzahl = $('#test > .c1').length;
Das problem ist, dass die ID nicht so wie in meinem beispiel (sorry, wollts einfach halten) gegeben ist, sondern ich das objekt habe.
(Ich iteriere über ein Objekt Array und habe dann nur das Objekt, das selbst aber keine ID besitzt in einer Variablen, mit der ich dann weiterarbeite)
MFG
nochmal genauer:
<div class="c1">
<div class="c2"></div>
<div class="c2"></div>
<div class="c2"></div>
[...]*?
</div>
<div class="c1">
<div class="c2"></div>
<div class="c2"></div>
[...]*?
</div>
Ich füge jetzt jedem c2 ein click event hinzu.
Und innerhalb des Events möchte ich über die c2 Objecte iterieren aber nur über die innerhalb der c1 Klasse in der auch das angeklickte c2 war.
Beitrag zuletzt geändert: 6.10.2012 16:22:16 von programtools -
In jQuery gibt es die Funktionen .parent() und .children() damit könntest du vom Objekt auf den Parent .c1 gehen und dann alle Kind-Elemente .c2 mit .each() ansprechen oder mit .length. Je nachdem was du willst.
MfG
Dominic -
Ja auf die Parent Funktion bin ich auch gestoßen, ich weiss jedoch gerade nicht wie ich die einsetzen soll?!
Und könnte mir jemand die each Funktion erklären? Ich hab mal bei der JQuery HP nachgelesen, habs aber glaub ich nicht rundum verstanden und bevor ich eine 0815 Lösung zusammenbretter die nur mehr Probleme bringt... :)
Vielen Dank und MFG
-
Also:
Der DOM Tree ist ein richtiger Baum, mit Stamm (body), Wurzeln (head), und am Stamm viele Äste und Zweige (die DOM Nodes, DIV Boxen, img Tags, alles mögliche). Jeder dieser Teile hat im Normalfall ein Elternteil (und sei es nur der Stamm), von dem es abgesprossen ist. Du kannst also mit dem $().parent() dir das Elternteil deiner Selektion zurückgeben lassen, ohne zu wissen, wie du es eigentlich ansprechen würdest. Das Baummodell sollte bei der Vorstellung helfen (zweig.parent() => ast , ast.parent() => stamm, jeweils als Returnwert, ganz einfach dargestellt)
children wiederum gibt ein Array glaub ich war das zurück, welches alle direkten Kindobjekte Enthält. Du würdest also mit ast.children() alle Zweige, die an diesem Ast abgehen, erhalten.
each ist eine Funktion, mit der man jeden dieser Zweige behandeln kann. Wenn du ast.children() sagst, weißt du nicht, wieviele das sind, oder was für welche. Du möchtest aber höchstwahrscheinlich mit jedem etwas ausführen. Also kannst du ast.children().each( myFunc ) sagen, um mit jedem der Zweige, die hier zurückkommen, etwas zu machen. myFunc ist dabei eine Funktion, kann auch eine Anonyme Funktion sein, welche normalerweise 2 Paramenter entgegen nehmen kann: Unzwar einmal index, und einmal Element. Der Index ist die Zahl i, welche es in einer Arrayiteration einnehmen würde. Das lass ich jetzt mal so stehen, ich hoffe es ist klar. Das Element ist das direkte DOMElement, du kannst es mit $(element) dann einfach benutzen. Man kann aber auch einfach mittels this darauf zugreifen, denn in dem Scope der Funktion ist this das entsprechende DOM-Element selbst. Du kannst also mit ast.children().each( function(){ $(this).fadeOut(); }); jedes Kindelement von Ast ausblenden, mit dem fadeOut Effekt.
Ich hoffe, das ist soweit klar geworden, an sich sehr nützliche Hilfsmittel. Besonders der DOMTree ist eine super Hilfe, wenn man ihn sich vorstellt.
Liebe Grüße -
Vielen Dank für diese ausführliche Beschreibung!
Das mit dem each hatte ich falsch verstanden, ich dachte ich gehe damit direkt über die Kindelemente.
Mein Problem hat sich damit gelöst! Vielen Dank nochmal und liebe Grüsse! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
