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>