0

私はソート可能なリストを持っています（ボタンをクリックするだけでソート可能なjQuery UIではありません）。via による右へのソートはafter()正常に機能しますが、 with による左へのソートは機能しbefore()ません。

まず第一にコード：

HTML

写真リスト:

<ul class="PhotoList">
   <li>
       <div class="ThumbWrapper">
           <img src="images/img_testphoto.jpg" />
       </div>
   </li>
   [...more Elements...]
</ul>

選択可能なリスト:

(絶対に写真の上に配置)

<ul class="SelectablePolaroids">
  <li>
    <div class="Selectable">
        <div class="Tools">
            <div class="ArrowLeft Tool">
            </div>
            <div class="Delete Tool">
            </div>
            <div class="ArrowRight Tool">
            </div>
        </div>
    </div>
  </li>
  [...more Elements...]
</ul>

JS

バインド関数

jQuery('.SelectablePolaroids .Selectable .ArrowLeft').live('click', function(){sortPolaroid(jQuery(this),0)});
jQuery('.SelectablePolaroids .Selectable .ArrowRight').live('click', function(){sortPolaroid(jQuery(this),1)});

関数

function sortPolaroid(elm, right)
{
    var selectitem = elm.parents('li');
    var index = jQuery('.SelectablePolaroids').children().index(selectitem);
    var photo = jQuery('.PhotoList').children().eq(index);
    selectitem.remove();
    photo.remove();
    if(right)
    {
        jQuery('.SelectablePolaroids').children().eq(index).after(selectitem);
        jQuery('.PhotoList').children().eq(index).after(photo);
    }
    else
    {
        console.log(index);
        jQuery('.SelectablePolaroids').children().eq(index).before(selectitem);
        jQuery('.PhotoList').children().eq(index).before(photo);
    }
 }

rightが true または.ArrowRightクリックされた場合、期待どおりに機能します。項目が削除され、さらに 1 つ右の位置に挿入されます。indexご覧のとおり、else ステートメントがまったく実行されているかどうか、およびインデックスが正しいかどうかを確認するためにログに記録しました。そして、ええ、else ステートメントが実行され、インデックスも正しいです。before()別の方法で作業していますか、after()それとも別の間違いに目がくらんでいますか?

編集：

の後にインデックスも記録しましたbefore()。

//...
else {
   console.log(index);
   jQuery('.SelectablePolaroids').children().eq(index).before(selectitem);
   console.log(jQuery('.SelectablePolaroids').children().index(selectitem));
   jQuery('.PhotoList').children().eq(index).before(photo);
}

そして、それは同じままで、何も変わりません...しかし、それは削除されました。つまり、まったく同じ位置に挿入されているため、次のことを行っている場合に機能します-私の解決策：

//...
else {
    jQuery('.SelectablePolaroids').children().eq(index-1).before(selectitem);
    jQuery('.PhotoList').children().eq(index-1).before(photo);
}

しかし、理由はよくわかりません...新しい要素はインデックスにある必要があり、前にインデックスの前に挿入する必要があります...誰かが知っている場合は、答えてください:-)

...

わかりました、自分でそれを考え出して答えました、騒ぎについて申し訳ありませんが、他の人も知らないで、私と同じように考えているかもしれません:-)

4

2 に答える 2

1

photo.remove();実際にはツリーからdom要素を削除するため、インデックスの不一致があると思います。要素を移動するだけで、削除せずに before/after を使用してみてください。

于 2012-08-10T09:33:29.427 に答える
0

要素を削除すると、前の要素ではなく次の要素がインデックスを取得するため、同じ位置に挿入されます。after()新しいインデックスを取得する要素が「正しい方向」にあるため、次のように機能します。

//...
else
{
    jQuery('.SelectablePolaroids').children().eq(index-1).before(selectitem);
    jQuery('.PhotoList').children().eq(index-1).before(photo);
}

ただの論理的な間違いです...適切に考えた後に解決しました:-)

于 2012-08-10T10:02:16.107 に答える