Question

＆＃13;

var selectd = 0;
  var itemLv1 = $("#create-summary .lv1"); 
  $(itemLv1).click(function(){
    selected = $(this).index(".lv1");
    $(this).toggleClass('clicked').siblings().removeClass('clicked');
  });

  $("#moveUp").click(function(){
    if(selected > 0){
      jQuery($(itemLv1).eq(selected - 1).before(jQuery($(itemLv1).eq(selected))));
      selected = selected - 1;
      console.log(selected);
    }
  });

＆＃13;

.clicked {
    background-color:red;
}

.lv2 {
    margin-left:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="create-summary">
            <div class="lv1">1. AAA</div>
            <div class="lv1">2. BBB</div>
            <div class="lv1">3. CCC</div>
            <div class="lv2">3.1 111</div>
            <div class="lv2">3.2 222</div>
            <div class="lv2">3.3 333</div>
            <div class="lv1">4. DDD</div>
            <div class="lv1">5. EEE</div>
          </div>

<button type="button" id="moveUp">Up </button>

＆＃13;

现在，我写了一些jQuery来移动我的div并且它可以工作但只移动一次。再次点击时div不会正确移动。

有什么问题？

另外，如何移动＆＃34; lv1＆＃34;用＆＃34; lv2＆＃34;同时上课？

Answer 1

一种解决方案是存储元素而不是索引：

// Store Element here instead of Index
var $selectd = $();
var $itemLv1 = $("#create-summary .lv1"); 
$itemLv1.click(function(){
    $selectd = $(this); //Note: Storing element instead of index
    $(this).toggleClass('clicked').siblings().removeClass('clicked');
});

$("#moveUp").click(function(){
    // Take the current selected element (if none, jQuery doesn't do anything)
    $selectd.add($selectd.nextUntil(":not(.lv2)"))        // Add any following `.lv2` elements to the collection
            .insertBefore($selectd.prevAll(".lv1:first")) // Insert before the previous `.lv1`
});

请参阅小提琴：http://jsfiddle.net/knexpvqn/

Answer 2

这是我用来移动元素的代码：

$("#moveUp").click(function () {
    $(".clicked").insertBefore($("#create-summary").children().get($(".clicked").index() - 1));
});

Here is the JSFiddle demo

Answer 3

试试这支笔：http://codepen.io/nOji/pen/RPvexe

我注意到你的代码的问题是itemLv1变量在DOM操作之后不会是元素的表示，因此插入元素上的click事件将不起作用，并且向上移动操作将不会查询正确的指数。

Answer 4

你可以这样做：

$("#create-summary .lv1").click(function () {
    $(this).toggleClass('clicked').siblings().removeClass('clicked');
});

$("#moveUp").click(function () {
    var selected = $("#create-summary").find(".clicked");
    selected.prev().before( selected );
});

.clicked {
    background-color:red;
}
.lv2 {
    margin-left:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="create-summary">
    <div class="lv1">1. AAA</div>
    <div class="lv1">2. BBB</div>
    <div class="lv1">3. CCC</div>
    <div class="lv2">3.1 111</div>
    <div class="lv2">3.2 222</div>
    <div class="lv2">3.3 333</div>
    <div class="lv1">4. DDD</div>
    <div class="lv1">5. EEE</div>
</div>
<button type="button" id="moveUp">Up</button>

如何使用jQuery移动div元素？

4 个答案: