Kontakt

michael trenkler eBuisness Solutions
Humboldtstraße 1
79098 Freiburg

Email info@mtcd.de
Telefon+49 761 453 89 72  
Mobil+49 151 234 34 080
Profil Michael Trenkler
vcf-Card herunterladen
Mein Profil bei xing

jQuery Tricks: Schnell auf Elemente und seine Attribute zugreifen

Als Erweiterung des Artikels "jQuery Tricks: Den Tagname des aktuellen Elements ermitteln" eine vollständigere Auflistung der Attribute, auf die man schnell und einfach zugreifen kann:

Beispiel HTML-Code 

<div class="content"> 
  <div id="first" class="c_first test">first</div><div id="second" class="c_second test">second</div><div id="third" class="c_third test">third</div><div id="fourth" class="c_fourth test">fourth</div><div id="fifth" class="c_fifth test">fifth</div><div id="sixsth" class="c_sixsth test">sixsth</div></div>
 
 

Klasse, Name, ID und HTML-Inhalt

$('div.content div').each(function(){
  c = $(this).context.className; // Den Namen der CSS-Klasse
  t = $(this).context.tagName;   // Den Namen des Tags
  i = $(this).context.id;        // Die ID
  h = $(this).context.innerHTML  // Den HTML-Inhalt des Tags
});
 
 

Die Anzahl der gefundenen Elemente im jQuery-Objekt ermitteln

elements = $('div.content div');

nrElements = elements.size();  // Gibt die Anzahl der Elemente im jQuery-Objekt aus
nrElements = elements.length;  // Alternative Schreibweise im nativen JS

alert(nrElements);             // Gibt "6" aus
 
 

Den Wert oder ein Attribut eines DOM-Elements im jQuery-Objekt ausgeben

elements = $('div.content div');

currentID = elements[0].id;     // Schnellste Schreibweise
currentID = elements.get(0).id; // Ausführliche Schreibweise
alert(currentID);               // Gibt "first" aus
 
 

Mit .get() ein bestimmtes DOM-Element im jQuery-Objekt auslesen

elements = $('div.content div');   // elements hat 5 Elemente

currentID = elements.get(2).id;    // Die ID des dritten Elements ermitteln
alert(currentID);                  // Gibt "third" aus

currentElement = elements.get(2);  // Gibt das 3te DOM Element im jQuery-Objekt zurück
alert(currentElement);             // Gibt "[Object HTMLDivElement]" aus 
 
 

Mit .index() die Position eines DOM-Elements im jQuery-Objekt bestimmen

elements = $('div.content div');   // elements hat 5 Elemente

needle           = $('div#fifth');          // Erzeugt das Objekt, nachdem gesucht wird
positionInObject = elements.index(needle);  // Gibt die Position des DOM-Objekts im jQuery-Objekt zurück

alert(positionInObject);                    // Gibt "4" zurück