javascript - 使用jquery更改父div中的元素位置

Question

在我的 div class="box" 中有标题 H1 和 logo div 。 HTML 如下所示，因此 Logo 图像位于标题文本下方。现在我想使用 jquery(使用三元或 if else)打乱 H1 和 logo div 的位置，将标题定位在 logo div 下方，反之亦然.

HTML:

<div id="block">    
     <div id="box">    
       <h1><a>HEADING TEXT</a></h1>    
       <div class="logo">
          <a>
             <img src="images/logo.png">" alt="" width="150" height="150"/>
          </a>
       </div>    
     </div>
 </div>

CSS:

#box {
    width: 230px;
    height: 500px;
}

#logo {
    width: 230px;
    height: auto;
}

#logo img {
    width: 150px height:150px;
}

如何调整位置

Answer 1

看演示

var $box = $('#box').click(function(){
    var $this = $(this), $h1 = $box.find('h1'), $div = $box.find('.logo');

    if($h1.index() < $div.index()){
        $h1.detach().insertAfter($div)
    } else {
        $h1.detach().insertBefore($div)
    }
})

演示:Fiddle