javascript - 获取每个具有类的子元素并将其插入到其父元素之前

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

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

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

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

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

Demo