jQuery выберите родителя элемента и используйте для него prependTo () - PullRequest
Новая
       29

jQuery выберите родителя элемента и используйте для него prependTo ()

0 голосов
/ 17 декабря 2018

Я пытаюсь реструктурировать элементы.Проблема, с которой я сталкиваюсь, состоит в том, что элементы не имеют уникальных классов или идентификаторов.Так, если, например, вызывается .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');

Как я могу ограничить функцию для своих родителей?

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Вы можете использовать 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>
0 голосов
/ 17 декабря 2018

Ваш код неверен, потому что он выбирает все .text-parent и вставляет каждый в другой.Вам нужно перебрать .text3 с помощью .each() и в функции выбрать соответствующий родительский элемент. 

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