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

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.