How to move div element inside another div element?

Question

 var $selected = $(); var $itemLv1 = $("#create-summary .lv1"); $itemLv1.click(function(){ $selected = $(this); $(this).toggleClass('clicked').siblings().removeClass('clicked'); }); $("#moveUp").click(function(){ $selected.add($selected.nextUntil(":not(.lv2)")) .insertBefore($selected.prevAll(".lv1:first")); }); $("#moveDown").click(function(){ $selected.add($selected.nextUntil(":not(.lv2")) .insertAfter($selected.nextAll(".lv1:first")); }); 

 .clicked{ color: red; font-weight:700; } .lv2, .lv3 { margin-left:15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="create-summary"> <div class="lv1"> Introduction</div> <div class="lv1">1. AAA</div> <div class="lv1">2. BBB</div> <div class="lv1">3. CCC <div class="lv2">3.1 aaa</div> <div class="lv2">3.2 bbb</div> <div class="lv2">3.3 ccc</div> <div class="lv2">3.4 ddd <div class="lv3">3.4.1 xxxxx</div> <div class="lv3">3.4.2 yyyyy</div> <div class="lv3">3.4.3 zzzzz</div> </div> </div> <div class="lv1">4. DDD</div> <div class="lv1">5. EEE</div> </div> <button type="button" id="moveUp">Up </button> / <button type="button" id="moveDown">Down</button> 

Now, I can move up or down for lv1 element with its child element.

However, how to only move an div element inside the child div?(only in lv3 or lv4 even lv5 or lv6)

Fir example, I want to move "ccc" up only in lv2 or move xxxxx only in lv3. Is there any way can do that?

Answer 1

I assume that you want a functionality like this,

var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");

$itemLv1.click(function (e) {
    $selected = $(this);
    var x = $(this).toggleClass('clicked');
    $("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
    x.siblings().removeClass('clicked');
    e.stopPropagation();
});

$("#moveUp").click(function () {
    $selected.insertBefore($selected.prev("[class^=lv]"));
});

$("#moveDown").click(function () {
    $selected.insertAfter($selected.next("[class^=lv]"));
});

DEMO