翻转div元素 [英] Flip div element

问题描述

<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

我的查询是我需要此输出

my query is that i need this output

01
02
03
1
2
8

但显示

01
02
03
1
8
2

推荐答案

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

You can achieve the desired result with the following jQuery ... see 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);

这篇关于翻转div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！