jQuery 选择元素的父元素并为其使用 prependTo()

Posted 2023-05-09

【中文标题】jQuery 选择元素的父元素并为其使用 prependTo()

【英文标题】：jQuery select parent of element and use prependTo() for it

【发布时间】：2019-05-17 17:53:29

【问题描述】：

我正在尝试重组元素。我面临的问题是元素没有唯一的类或 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');

如何将函数限制为其父级？

【问题讨论】：

你想移动每个.text3 "before" .text1 ?

【参考方案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>

【参考方案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>