如果元素包含在另一个元素中,如何移动元素

Question

我有以下模型(这里是一个jsbin:http://jsbin.com/vadutezaci/1/edit？html,css,output ):

<div class='jt-header'>a header 1</div>
<div class='jt-detail'>a detail 1
  <div class='jt-item-price'>12.34</div>
</div>
<div class='jt-header'>another header 2<div class='jt-item-price'>34.45</div></div>
<div class='jt-detail'>another detail 2
</div>

基本上,如果jt-item-price在jt-detail内,我想附加到前面的jt-header; 这是上面的第一个对联.如果它已经在jt-header内,请保持原样(第二个对联),以便上述内容变为:

<div class='jt-header'>a header  <div class='jt-item-price'>12.34</div>
</div>
<div class='jt-detail'>a detail
</div>
<div class='jt-header'>another header<div class='jt-item-price'>34.45</div></div>
<div class='jt-detail'>another detail
</div>

我该怎么做？我会认为detach().appendTo()但我如何检测到jt-item-price在一个细节内？我如何将它告诉前面的jt-header(可能有介入的非jt-header元素) ？

谢谢

编辑#1

一个更现实的例子似乎打破了使用next():

<div class='jt-row'>
<div class='jt-header'>a header 1</div>
</div>
<div class='jt-row'>
<div class='jt-detail'>a detail 1
  <div class='jt-item-price'>12.34</div>
</div>
</div>
<div class='jt-row'>

<div class='jt-header'>another header 2<div class='jt-item-price'>34.45</div></div>
</div>
<div class='jt-row'>
<div class='jt-detail'>another detail 2
</div>
</div>

Answer 1

Jquery append()接受一个函数,你可以使用以下逻辑:

$('.jt-header').append(function(){
    return $(this).next('.jt-detail').children('.jt-item-price');
});

-jsFiddle-