翻转 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

我创建了一个用于订购项目的小型交换脚本 - 它目前不适用于"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);
    }
  });
});

小提琴

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

Answer 2

您可以使用以下 jQuery 实现所需的结果...参见 jsFiddle 演示

.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 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);
}

演示