4

私はリストを持っています：

<li>item one<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item two<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item three<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item four<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item five<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>

それぞれに上下の矢印があります。私のjqueryには次のものがあります：

$(".upArrow").click(function() {

});

$(".downArrow").click(function() {

});

ユーザーが上矢印をクリックするとliが上のものと交換され、下をクリックすると下のli（存在する場合）と交換されるようにするにはどうすればよいですか。

4

3 に答える 3

6

jsFiddle（http://jsfiddle.net/A9j3E/6/）

$(".upArrow").click(function() {
    $(this).parent().insertBefore( $(this).parent().prev() );
});

$(".downArrow").click(function() {
    $(this).parent().insertAfter( $(this).parent().next() );
});​
于 2012-04-25T15:59:25.923 に答える
1

リストアイテムへの参照を取得し、その兄弟の前後に挿入することができます。

$(".upArrow").on("click", function(){
  var li = $(this).closest("li");
  li.insertBefore( li.prev() );
});

また、画像を適切に閉じるようにしてください。下矢印の画像はすべて不正な形式でした。

于 2012-04-25T15:55:37.557 に答える
0

このようなことを試してください

$(".upArrow").click(function() {
  var thisItem = $(this).closest('li');
  var prevItem = thisItem.prev();

  if(prevItem.length != 0) {
    thisItem.before(prevItem);
  }
});

$(".downArrow").click(function() {
  var thisItem = $(this).closest('li');
  var nextItem = thisItem.next();

  if(nextItem.length != 0) {
    thisItem.after(nextItem);
  }
});
于 2012-04-25T15:58:16.673 に答える