Question

var $selectd = $();
var itemLv1 = $("#create-summary .lv1"); 
$(itemLv1).click(function(){
    $selectd = $(this);
    $(this).toggleClass('clicked').siblings().removeClass('clicked');
});

$("#moveDown").click(function(){
    $selectd.add($selectd.nextUntil(":not(.lv2)"))
            .insertAfter($selectd.nextAll(".lv1:first"))
});

.clicked {
    background-color:red;
}

.lv2 {
    margin-left:10px;
}

<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="moveDown">Down </button>

当我点击＆＃34; CCC＆＃34;时，它会以第二级div向下移动。

然而，我点击＆＃34; BBB＆＃34;向下移动，它只会在＆＃34; CCC＆＃34;之后移动。没有＆＃34; CCC＆＃34;二级div。

如何制作＆＃34; BBB＆＃34;在整个CCC之后移动包括CCC第二级（111,222,333 div）

Answer 1

将元素正确嵌套到自己的容器中，以便每个元素处于同一级别。

<强> HTML

<div id="create-summary">
    <div class="lv1">
        <div class="title">1. AAA</div>
    </div>
    <div class="lv1">
        <div class="title">2. BBB</div>
    </div>
    <div class="lv1">
        <div class="title">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>
    <div class="lv1">
        <div class="title">4. DDD</div>
    </div>
    <div class="lv1">
        <div class="title">5. EEE</div>
    </div>
</div>
<button type="button" id="moveDown">Down</button>

<强> CSS

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

<强> Check Fiddle

如何使用二级div向下移动div元素？

1 个答案: