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

我有以下样机（这是一个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>

---

Jquery append（）接受一个函数，你可以使用下面的逻辑：

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

-jsFiddle-

---

考虑到你的编辑＃1，你应该能够通过组合.closest（）/ .prev（）/ .find（）

喜欢这个

$(function(){
    $('#move').on('click',function(){
        $('.jt-detail .jt-item-price').each(function(){
            $this = $(this);
            $this.appendTo($this.closest('.jt-row').prev().find('.jt-header'));
        }); 
    });
});

在这里检查小提琴

条件是保持当前的html结构与你的jt行:)

---

实际上很简单，只需要正确地遍历DOM树

根据你的例子，这里是逐步分解：

对于class="jt-item-price" 每个元素

如果父类等于jt-detail

THEN将元素附加到jt-row存在的前一个jt-header元素

否则移动到下一个jt-item-price元素并重复

这是代码的样子：

$('.jt-item-price').each(function(){
  if($(this).parent().hasClass('jt-detail')){
    var $headerCheck = $(this).parents('.jt-row');
    var loopCheck = false;

    while(!loopCheck){
      $headerCheck = $headerCheck.prev();
      if($headerCheck.find('.jt-header').length > 0){
        loopCheck = true;
      }
    }

    $(this).appendTo($headerCheck);
  }
})

〜Live CodePen〜

链接地址: http://www.djcxy.com/p/42555.html

上一篇: how to move an element into if it is contained in another element

下一篇: Append partial html code jquery