jQuery选择元素的父元素并使用prependTo（）

Question

我正在尝试重组元素。 我面临的问题是元素没有唯一的类或ID。 因此，例如，如果正在调用.prependTo ，它显然会移动所有匹配的元素。 HTML看起来像这样（重要：真实场景包含数百个<li>元素）：

<div id="top-element">          
    <ul>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example</div>
            </div>
        </li>
    </ul>
</div>

所以我想将text3作为text-parent的第一个子项。 但仅限于其自己的父元素。 所以text3不应该移动到其他<li>元素。 我试过这个，但它不正确，它仍然跨越所有元素：

$('.text3').parent('.text-parent').prependTo('.text-parent');

如何将功能限制为其父母？

Answer 1

您的代码是错误的，因为它选择了所有.text-parent并将每个插入另一个。 你需要使用.each()循环遍历.text3并在函数中选择相关的元素父元素。

$('.text3').each(function(){
  $(this).parent().prepend(this);
  // Or
  $(this).parent('.text-parent').prepend(this);
  // Or
  $(this).prependTo($(this).parent('.text-parent'));
});

 $('.text3').each(function(){ $(this).parent().prepend(this); }); 

 .text-parent {border: 1px solid #000} .text-parent > .text3 {color: red} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top-element"> <ul> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example2</div> <div class="text3">example3</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example2</div> <div class="text3">example3</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example2</div> <div class="text3">example3</div> </div> </li> </ul> </div> 

Answer 2

你可以使用insertBefore

在目标之前插入匹配元素集中的每个元素。

 $(this).insertBefore($(this).siblings('.text1'));

 $(".text3").each(function(){ $(this).insertBefore($(this).siblings('.text1')); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top-element"> <ul> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example3</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example3</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example3</div> </div> </li> </ul> </div>