javascript - 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 的第一个 child 移动。但仅限于它自己的父元素。所以 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>