Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

jQuery: 2 Elemente tauschen (Sortierfunktion)

#Tutorials#jQuery

Kommentare

Es gibt 0 Kommentare

Tags

#jquery #change #sort #swap #exchange #elements #elemente #objekte #tauschen

Facebook Twitter

14. Apr 2015

Für eine kleine sortierbare Liste brauchte ich ein Zeilen Code, die in einer Liste 2 Elemente miteinander austauscht. Das Ganze habe ich dann so gelöst.

Html-Markup


<div class="list">
    <div class="item">Listitem1 <div class="sortArrows"><a href="#" class="move-down">↓</a><a href="#" class="move-up">↑</a></div></div>
    <div class="item">Listitem2 <div class="sortArrows"><a href="#" class="move-down">↓</a><a href="#" class="move-up">↑</a></div></div>
    <div class="item">Listitem3 <div class="sortArrows"><a href="#" class="move-down">↓</a><a href="#" class="move-up">↑</a></div></div>
</div>

Javascript


$('.sortArrows a').click(function (e) {
    e.preventDefault(); // Klick Event nicht auslösen
    var $div = $(this).closest('.item'); // das derzeitige Item finden
    if (jQuery(e.target).is('.move-down')) { // gucken, ob man den Pfeil runter geklickt hat
        $div.next('.item').after($div); // nach unten sortieren
    } else {
        $div.prev('.item').before($div);// ansonsten nach oben sortieren
    }
});

Demo

Listitem1

↓↑

Listitem2

↓↑

Listitem3

↓↑