Question

我有4个div，每个都有顶箭头和向下箭头。如果用户单击顶部箭头 - 当前div更改位置具有更高的div，反之。

我该怎么做？此代码用于“底部箭头”并且无效...

$("button.down").click(function(){

var aDiv = $(this).parent();
var dDiv = $(this).parent().next("div");

$(this).parent().next("div").replaceWith(aDiv);
$(this).parent().replaceWith(dDiv);

});

http://jsfiddle.net/gjkhf81u/

Answer 1

您可能正在寻找insertBefore：

var div = $(theCurrentDiv);
var prev = div.prev();
if (prev[0]) {
    div.insertBefore(div.prev());
}

该代码将当前div移动到其兄弟之前，如果有的话。还有相关的before，这是另一种方式。

insertBefore示例：

＆＃13;

$("input[type=button]").click(function() {
  var div = $(".current");
  var prev = div.prev();
  if (prev[0]) {
    div.insertBefore(prev);
  }
});

＆＃13;

.current {
  color: green;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Up">
<div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div class="current">four</div>
</div>

＆＃13;

Answer 2

或者，您可以交换div的内容吗？

<div class="x"> Hello World </div>
<div class="y"> Bye World </div>

    $("button.down").click(function() {
        var temp = $(".x").html();
        $(".x").html() = $(".y").html();
        $(".y").html() = temp;
    });

Answer 3

如上所述T.J. Crowder，您要使用insertBefore和insertAfter。

当您在DOM中的不同位置插入节点时，它会被移动。

＆＃13;

$("button.down").click(function(){
  var aDiv = $(this).parents(".container");
  var nextDiv = aDiv.next(".container");
  aDiv.insertAfter(nextDiv);
});

$("button.up").click(function(){
  var aDiv = $(this).parents(".container");
  var prevDiv = aDiv.prev(".container");
  aDiv.insertBefore(prevDiv);
});

＆＃13;

.container {
    width: 100%;
    height: 25px; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: green;" class="container">
<button class="up">Up</button>
<button class="down">Down</button>
</div>

<div style="background-color: red;" class="container">
<button class="up">Up</button>
<button class="down">Down</button>
</div>

<div style="background-color: yellow;" class="container">
<button class="up">Up</button>
<button class="down">Down</button>
</div>

<div style="background-color: blue;" class="container">
<button class="up">Up</button>
<button class="down">Down</button>
</div>

＆＃13;

用另一个替换一个div - jquery

3 个答案: