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

Question

I am trying to restructure elements. The problem I face is that the elements do not have unique classes or IDs. So if, for example, a .prependTo is being called, it moves obviously all matching elements. HTML looks like this (important: real scenario contains hundreds of <li> elements):

<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. But only in its own parent element. So text3 should not move to the other <li> elements. 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?

Answer 1

Your code is wrong because it select all .text-parent and insert every one in another. You need to loop through .text3 using .each() and in function select relevant parent of elements.

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

You can use 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>