Question

我想要实现的目标和失败的原因是......

使用此代码结构：

<div class="catProductAttributeGroup">
  <div class="catProdAttributeTitle">TITLE 1</div>
  Content for class "catProductAttributeGroup" Goes Here </div>
<div class="catProductAttributeGroup">
  <div class="catProdAttributeTitle">TITLE 2</div>
  Content for class "catProductAttributeGroup" Goes Here </div>
<div class="catProductAttributeGroup">
  <div class="catProdAttributeTitle">TITLE 3</div>
  Content for class "catProductAttributeGroup" Goes Here </div>

显示如下：我想确保有一个insertBefore（）的标题;这就是为什么我在功能线下面有第一行。

<div class="catProdAttributeTitle">TITLE 1</div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>
<div class="catProdAttributeTitle">TITLE 2</div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>
<div class="catProdAttributeTitle">TITLE 3</div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>

使用这个：

$(".catProductAttributeGroup").each(function() {
    if ($(this).find(".catProdAttributeTitle").length > 0) {
        $( ".catProdAttributeTitle").insertBefore($(".catProductAttributeGroup"));
     }
});

但在第一个家长的顶部翻译所有标题：

<div class="catProdAttributeTitle">TITLE 1</div>
<div class="catProdAttributeTitle">TITLE 2</div>
<div class="catProdAttributeTitle">TITLE 3</div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>
<div class="catProductAttributeGroup"> Content for  class "catProductAttributeGroup" Goes Here </div>

请有人帮助我，谢谢！

Answer 1

在$(this)内使用each来引用当前元素。

$('.catProdAttributeTitle').each(function() {
    $(this).insertBefore($(this).parent());
});

如果元素是嵌套的，请使用closest()代替parent()。

$(this).insertBefore($(this).closest('.catProductAttributeGroup'));

Demo

获取具有类的每个Children元素，并在其父元素之前插入

1 个答案: