[英]jQuery select parent of element and use prependTo() for it
I am trying to restructure elements. 我正在尝试重组元素。 The problem I face is that the elements do not have unique classes or IDs.
我面临的问题是元素没有唯一的类或ID。 So if, for example, a
.prependTo
is being called, it moves obviously all matching elements. 因此,例如,如果正在调用
.prependTo
,它显然会移动所有匹配的元素。 HTML looks like this (important: real scenario contains hundreds of <li>
elements): 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>
So I want to move text3 as the first child of text-parent. 所以我想将text3作为text-parent的第一个子项。 But only in its own parent element.
但仅限于其自己的父元素。 So text3 should not move to the other
<li>
elements. 所以text3不应该移动到其他
<li>
元素。 I have tried this, but it's not correct, it still crosses all elements: 我试过这个,但它不正确,它仍然跨越所有元素:
$('.text3').parent('.text-parent').prependTo('.text-parent');
How do I limit the function to its parents? 如何将功能限制为其父母?
Your code is wrong because it select all .text-parent
and insert every one in another. 您的代码是错误的,因为它选择了所有
.text-parent
并将每个插入另一个。 You need to loop through .text3
using .each()
and in function select relevant parent of elements. 你需要使用
.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>
You can use insertBefore 你可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.