Jquery 如果一个元素包含在另一个元素中，如何将其移动到

我有以下模型（这里有一个jsbin:）：

a头1
a细节1
12.34
另一个标题234.45
另一个细节2

基本上，如果一个jt项目价格在一个jt细节中，我想附加到前面的jt标题中；这是上面的第一副对联。如果已经在jt头中，保持原样（第二副对联），使上述内容变为：

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

a标题12.34
细节
另一个校长34.45
另一个细节

我该怎么做？我会认为detach（）.appendTo（），但我如何检测jt项目价格是否在细节中，以及如何将其告知前面的jt标题（可能存在中间的非jt标题元素）

编辑#1 更现实的例子是，使用next（）似乎会中断：

a标题1
a细节1
12.34
另一个标题234.45
另一个细节2

Jquery接受函数，您可以使用以下逻辑：

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

---

您只需使用

jQuery.parent（）

和

jQuery.prev（）

方法进行元素定位即可

在您的情况下，这很容易，因为您的类已经定义好了，所以在本例中，下面的代码应该可以做到这一点：

jQuery（文档）.ready（函数（）{
//按钮仅用于测试目的
jQuery（'.moveIt'）。在（'click'，movePrice'）；
//如果脚本应该自动运行
//将所有内容移出此函数
函数movePrice（）{
//为了维护目的
var_价格=‘jt项目价格’；
var _from='jt detail'；
var _to='jt头'；
//Vudu材料
jQuery（'div.+\u price）.每个（函数（）{
//获取元素
var_this=jQuery（this）；
var_parent=_this.parent（）；
var_parentClass=_parent.attr（'class'）；
//如果父项与我们想要的包装匹配
//将元素从
if（\u parentClass==\u from）{
//获取其父元素的上一个元素
var _finalWrapper=_this.parent（）.prev（）；
//如果前面的元素类与我们的
//目的地等级
如果（\u finalWrapper.attr（'class'）=\u to）{
//把价格放在那里
jQuery（_finalWrapper）.append（_this）；
}
}
});
}
});

/**
*答复：http://stackoverflow.com/questions/28661854/how-to-move-an-element-into-if-it-is-contained-in-another-element
*/
jQuery（文档）.ready（函数（）{
//无行包装器的测试
jQuery（'.unwrap'）。在（'click'，function（）上{
jQuery（'.row>.jt header'）.unwrap（）；
});
//按钮仅用于测试目的
jQuery（'.moveIt'）。在（'click'，movePrice'）；
//如果脚本应该自动运行
//将所有内容移出此函数
函数movePrice（）{
//为了维护目的
var_价格=‘jt项目价格’；
var _from='jt detail'；
var _to='jt头'；
//Vudu材料
jQuery（'div.+\u price）.每个（函数（）{
//获取元素
var_this=jQuery（this）；
var_parent=_this.parent（）；
var_parentClass=_parent.attr（'class'）；
//如果父项与我们想要的包装匹配
//将元素从
if（\u parentClass==\u from）{
//获取其父元素的上一个元素
var _finalWrapper=_this.parent（）.prev（）；
//如果前面的元素类与我们的
//目的地等级
如果（\u finalWrapper.attr（'class'）=\u to）{
//把价格放在那里
jQuery（_finalWrapper）.append（_this）；
}
}
});
}
});
.jt头{
明确：两者皆有；
边框：1px实心#F5；
填充：0px.5em；
边缘：.5em；
背景#f1f1；
}
.jt详细信息，
.jt项目价格{
显示：内联块；
}
.jt详细信息{填充：1em；}
.jt项目价格{
利润率：1米0；
背景#f1f1；
填充：.5em；
字体大小：粗体；
}
.行{
显示：块；
填充：.5em；
边框：1px实心#EFEF；
}

产品1
产品详情
12.34
产品2
34.45
产品详情
产品3
产品详情
20.55

移动价格
从行展开
按照您在edit#1中发布的结构，迭代所有
jt行
，如果有一个
jt商品价格
的父项不是
jt头
，则将该元素移到前一行的
jt头

     $('.jt-row').each(function(){

        /* Assuming you have only jt-detail in each row
         * and you need to append jt-detail to previous row's jt-header
         * if it's not having any jt-detail already */
        var $row = $(this),
        $ele = $row.find('.jt-item-price');
        if($ele && $ele.parent().hasClass('jt-detail')){
           var detached = $ele.detach();
           detached.addClass('changed'); // just for noticing change
           $row.prev().find('.jt-header').append(detached);
        }
      });

这里有一个可以玩的工具：）
考虑到您的编辑#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'));
        }); 
    });
});


条件是在jt行中保持当前html结构：）
实际上相当简单，只需正确遍历DOM树即可

根据您的示例，这里是逐步细分：


对于带有
class=“jt项目价格”

如果父类等于
jt detail

然后将元素附加到前面的
jt头
元素，该元素位于
jt行中
其他移动到下一个
jt项目价格
元素并重复

下面是代码的样子：

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

这里是小提琴链接：

守则：

$(".jt-detail .jt-item-price").each(function () {
    var price = $(this);
    var prevhead = $(this).parent(".jt-detail").prev(".jt-header");
    if (!prevhead.find('.jt-item-price').length > 0) {
        price.appendTo(prevhead);
    }
});

试一试


//过滤器`.jt物料价格`，
//返回元素尚未是`jt头的子元素`
var itemPrice=$（“.jt itemPrice”）.not（函数（i，el）{
return$（el）.parent（）是（“.jt头”）
});
//`itemPrice`父元素
var item=itemPrice.parents（“.jt行”）；
//如果`item`包含子元素`jt header`，
//在当前“项目”中追加“项目价格”`
if（item.find（“.jt头”）为（“*”）{
item.find（“.jt头”）.append（itemPrice）
} 
//else按索引1小于c筛选“.jt行”
$('.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);
  }
})

$(".jt-detail .jt-item-price").each(function () {
    var price = $(this);
    var prevhead = $(this).parent(".jt-detail").prev(".jt-header");
    if (!prevhead.find('.jt-item-price').length > 0) {
        price.appendTo(prevhead);
    }
});

// filter `.jt-item-price` , 
// return elements not already children of `jt-header`
var itemPrice = $(".jt-item-price").not(function (i, el) {
    return $(el).parent().is(".jt-header")
});

// `itemPrice` parent element
var item = itemPrice.parents(".jt-row");

// if `item` contains child element `jt-header` ,
// append `itemPrice` at current `item`
if (item.find(".jt-header").is("*")) {
    item.find(".jt-header").append(itemPrice)
} 
// else filter `.jt-row` by index 1 less than current `item`,
// append `itemPrice` to `.jt-header` at selected `.jt-row`
else {
    item.siblings(".jt-row").eq(item.index(".jt-row") - 1)
    .find(".jt-header").append(itemPrice)
};

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

});