0 4153

jQuery Tutorial – not Selektor – Ein Element, das NICHT eine spezielle Klasse hat selektieren

In unserem letzten jQuery Tutorial haben wir gelernt, wie man ein spezielles Element aufgrund eines Namens und davor, wie man Elemente mit speziellen Klassen oder IDs selektieren kann. Heute werden wir das genaue Gegenteil machen. Wir werden Elemente selektieren, die NICHT eine spezielle Klasse haben.
Macht das Sinn?
Nun selbstverständlich kann es auch Sinn machen Elemente, die nicht aktiv sind oder die nicht die last oder first Klasse haben auch mal einzufaden oder auszufaden, oder einfach gesondert zu behandeln.
Natürlich gibt es auch die Möglichkeit in jQuery per first() und per last() Elemente ohne Klasse zu selektieren, aber ich möchte dies hier nur als erklärendes Beispiel anführen.
Nehmen wir jetzt einfach mal eine klassische UL-Navigation mit einem first Element und einem last Element und einem aktiven Element.

Beispielcode HTML:

<ul>
<li>Home</li>
<li class="active">Kunden</li>
<li>Referenzen</li>
<li>Kontakt</li>
<li class="last">Impressum</li>
</ul>
<button>entfernen</button>

Ich habe unter das UL noch ein Button gesetzt. Darauf setzen wir nun einen Listener für on click:
Beispielcode jQuery:

<script type="text/javascript">
$('button').on('click', function() {

});
</script>

In diese Listener function fügen wir nun unseren Code ein:
Wenn wir nun die nicht aktiven Elemente ausblenden wollen, rufen wir folgendes Script auf:

Beispielcode jQuery:

<script type="text/javascript">
$('ul li:not(.active)').hide();
</script>

Wir verknüpfen nun beide Aufrufe miteinander:
Beispielcode jQuery:

<script type="text/javascript">
$('button').on('click', function() {
    $('ul li:not(.active)').hide();
});
</script>

Wir können auch mehrere Konditionen miteinander verknüpfen. Wir können nun beispielsweise alle LI-Elemente ausblenden, die nicht die Klasse first oder last haben.

Wir verknüpfen nun beide Aufrufe miteinander:
Beispielcode jQuery:

<script type="text/javascript">
$('button').on('click', function() {
$('ul li:not(.first, .last)').hide();
});
</script>

Ich hoffe, ich konnte Euch den :not Selektor verständlich erklären und wünsche Euch noch viel Spaß mit jQuery.

See the Pen mydmzm by Andreas Lang (@sphinxflash) on CodePen.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.