元素的 jQuery select parent 并为其使用 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 的第一个 child 移动。但仅限于它自己的 parent 元素。所以 text3 不应该移动到其他 <li> 元素。我已经试过了，但是不正确，它仍然跨越了所有元素：

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

如何将函数限制为 parents？

Answer 1

您的代码是错误的，因为它 select 所有 .text-parent 并将每个代码插入另一个代码。您需要使用 .each() 和函数 select 元素的相关父元素来遍历 .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

Insert every element in the set of matched elements before the target.

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

元素的 jQuery select parent 并为其使用 prependTo()

jQuery select parent of element and use prependTo() for it

html

javascript

jquery

parent

jquery-selectors