15. Mai 2010

jQuery – Mehrere Elemente verbergen

15. Mai 2010 - Geschrieben von Martin - 3 Kommentare

Jeder der mehrere Elemente auf ein mal mittels jQuery verstecken will, die gleich benannt wurden, wird früher oder später feststellen müssen, das der Selektor immer das erste gefundene Element verwendet.

<div id='test'>Test</div>
<div id='test'>Test 2</div>
<div id='test'>Test 3</div>

Um dies zu umgehen habe ich mir folgende 2 Funktionen geschrieben, welche alle Elemente die auf den 1. Parameter zutreffen nacheinander abarbeiten. Hierzu hole ich mir alle zutreffende Elemente via „$(name).get()“, anschließend kann ich diesen Array mittels „$.each()“ durchlaufen (das jQuery Pendant zu foreach() unter PHP). Da ich nun den Index des Elementes habe kann ich nun das entsprechende Element verbergen.

function hideAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).hide(speed);
  });
}

Und hier noch eine zum Wieder ein faden (sanftes einblenden) der Elemente:

function fadeInAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).fadeIn(speed);
  });
}

Als 2. Parameter wird immer der Speed übergeben in der die Animation ablaufen soll, diese sind die jQuery typischen wie „slow“ und „fast“.

Noch mal zu unserem obigen Beispiel, sollen nun alle 3 div’s ausgeblendet werden so benötigen wir lediglich folgenden Code:

hideAll('#test', 'slow');

und zum wieder einblenden selbstverständlich:

fadeInAll('#test', 'slow');

3 Antworten zu “jQuery – Mehrere Elemente verbergen”

  1. […] Dieser Eintrag wurde auf Twitter von Browsergames, LinuxDoku erwähnt. LinuxDoku sagte: jQuery – Mehrere Elemente verbergen – http://b2l.me/uqj2j […]

  2. sebi sagt:

    IDs identifizieren ein (HTML-)Element eindeutig. Mehrere Elemente mit gleicher ID sind invalid und entsprechen nicht dem HTML-Standard. Wer sich also dran hält, hat solche „Probleme“ nicht.

  3. Hüseyin AKTURAN sagt:

    Es ist tool!! DANKE!!!

Schreibe einen Kommentar