翻转div元素

Question

<div id="bar">
  <div id="h2"> 01 </div>
  <div id="h2"> 02 </div>
  <div id="h2"> 03 </div>
  <div class="h1"> 1
    <div id="a1"> 8 </div>
  </div>
  <div id="h2"> 2 </div>
</div>

function reverseChild($parent, index) {
  var childItem = $parent.children('div:eq(' + index + ')');
  childItem.prev().before(childItem);
};


$(document).ready(function () {
  reverseChild($('#bar h1'), 1);
});

JSFiddle

我的查询是我需要此输出

01
02
03
1
2
8

但显示

01
02
03
1
8
2

Answer 1

您可以使用以下jQuery获得所需的结果...请参阅jsFiddle Demo

HTML

<div id="bar">
  <div id="h2"> 01 </div>
  <div id="h2"> 02 </div>
  <div id="h2"> 03 </div>
  <div class="h1"> 1
    <div id="a1"> 8 </div>
  </div>
  <div id="h2"> 2 </div>
</div>

JS

var last= $('#bar > div:last-child').clone(),
    inner = $('#a1').clone();

$('#bar > div:last').remove();
$('#bar').append(inner);

$('.h1').children().remove();
$('.h1').append(last);

Answer 2

我为订购商品创建了一个小的交换脚本 - 它当前不适用于'01'，因为我将其转换为整数来比较它们。无论如何，如果你愿意，你可以为此实现一些额外的检查。

HTML：

<div id="bar">
  <div class="h2">1</div>
  <div class="h2">8</div> 
  <div class="h2">2</div>
</div>

JS：

$(document).ready(function () {
  $('#bar').find('.h2').each(function(){
    var currentItem = $(this),
        nextItem = $(this).next('.h2'),
        currentItemValue = parseInt(currentItem.text()),
        nextItemValue = parseInt(nextItem.text());

    if(currentItemValue > nextItemValue) {
        currentItem.before(nextItem);
    }

  });
});

fiddle

这是一种更加动态的交换元素方法，具体取决于它的innerHtml。也许这就是你想要的

Answer 3

<强> JQuery的

function reverseChild($parent, index,$replaceObj) {
    var childItem = $parent.children().eq(index-1);
    var replaceObjIndex=$replaceObj.index()+1;
    $replaceObj.insertAfter(childItem);
    insertAtIndex("bar",replaceObjIndex,childItem);
};
$(document).ready(function () {
    reverseChild($('#bar .h1'), 1,$("#bar").children('div:last'));
});
function insertAtIndex(objID,i,$insertItem) {
    if(i === 0) {
     $("#"+objID).prepend($insertItem);        
     return;
    }
    $("#"+objID+" > div:nth-child(" + (i-1) + ")").after($insertItem);
}

DEMO