Verschieben Sie die enthaltenen Elemente mit jquery nach oben und unten

Vielen Dank für jede Hilfe, die Sie zur Verfügung stellen können! Derzeit verwende ich einen UI-sortierbaren Code, mit dem Benutzer Elemente in der angegebenen Reihenfolge nach oben und unten verschieben können. Jetzt möchte ich jedem dieser Elemente eine Reihe von Schaltflächen "Nach oben" und "Nach unten" zuweisen, mit denen Benutzer Elemente mit einem Klick nach oben und unten verschieben können. Ich habe versucht, diese Beiträge zu überarbeiten, aber mir scheint etwas Offensichtliches zu fehlen ...

jQuery Sortable Bewegen Sie die UP / DOWN-Taste in jquery auf / ab bewegen

Ich denke, irgendwie wende ich die Abfrage nicht auf das richtige Element an. Meine jsfiddle ist hier:http://jsfiddle.net/kevindp78/vexw5/2/ und Code ist unten.

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});

Antworten auf die Frage(2)

Ihre Antwort auf die Frage