web-dev-qa-db-ja.com

jqueryで含まれている要素を上下に移動する

あなたが提供できるどんな助けにも感謝します！現在、私はuiソート可能なコードを使用して、ユーザーがアイテムを順番に上下に移動できるようにしています。ここで、これらの各アイテムに、ユーザーがクリックするだけでアイテムを上下に移動できる「上」ボタンと「下」ボタンのセットを提供したいと思います。私はこれらの投稿を作り直そうとしましたが、明らかな何かが欠けているようです...

jQueryソート可能上/下移動ボタンjqueryで上/下に移動

どういうわけか、jqueryを正しい要素に適用していないと思います。私のjsfiddleはここにあります： http://jsfiddle.net/kevindp78/vexw5/2/ そしてコードは以下にあります。

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')
});
jqueryjquery-ui-sortable
13
KDP

コードで対処すべき問題がいくつかあるので、それらを順番に見ていきましょう。

最初に$('up-button')があります _._ がないため、ボタンは選択されません。

次に、1レベルだけ上がる parent() メソッドを使用しています。代わりに parents('.leg') を使用してください。

insertBefore() は、選択したコンテンツを配置する場所に関するターゲットを受け入れるメソッドです。

previous()は関数ではなく、 prev() であり、前の要素を選択するだけなので、パラメーターは必要ありません。

これらの修正をすべて組み合わせると、次のようになります。

_$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

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

この編集されたフィドルで示されているように http://jsfiddle.net/vexw5/6/

20
BeardFist

JSを次のようなものに置き換えてみることができます。

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

http://jsfiddle.net/vexw5/7/

これは基本です。アニメーションなどはありません。

8
Ryan