jQuery перемещает / добавляет несколько элементов с одинаковым именем класса, только внутри родительского div

Question

У меня есть динамически сгенерированная страница со следующей структурой:

<div class="list-item">
    <div class="year">xxx1</div>
    <div class="other-data">xxx1</div>
    <div class="item-title">Title 1</div>
    <div class="item-information"></div>
</div>
<div class="list-item">
    <div class="year">xxx2</div>
    <div class="other-data">xxx2</div>
    <div class="item-title">Title 2</div>
    <div class="item-information"></div>
</div>

На странице есть несколько элементов списка.

В каждом элементе списка мне нужно взять "year" и "other-data" и удалить его сверху из item-title и appendTo для "item-information".

Я пробовал следующее:

$('.year').appendTo('.item-information');
$('.other-data').appendTo('.item-information');

Это не работает должным образом, так как он в основном берет ВСЕ экземпляры "year" и добавляет его к "item-information" - так что если на странице 3 элемента, каждый элемент в конечном итоге показывает 3 экземпляра "year" в каждом " пункт-информация".

Чтобы решить эту проблему, я знаю, что мне нужен какой-то оператор, который выбирает элемент списка, находит год и другие данные в этом элементе списка, затем находит информацию об элементе в том же элементе списка и добавляет его туда.

Проблема в том, что я не уверен, как структурировать утверждение, я попробовал следующее, но он ошибся:

$('.list-item').find('.year').appendTo(function({
    $(this).find('.item-information');
});

Может ли кто-нибудь помочь мне с правильной структурой для того, что я хочу сделать?

Благодарю.

Answer 1

$(".list-item").each(function () {    //loop over each list item
    myYear= $(".year", this);         //get the year of the current list item
    $(".item-information", this).append(myYear); //append it to the item information
});

Вы можете сделать это, тогда, конечно, для каждого другого дочернего элемента элемента списка;)

Answer 2

Ты можешь использовать append(function) а также .siblings() следующее:

$('.item-information').append(function() {  
    return $(this).siblings('.year,.other-data');
});

   $('.item-information').append(function() {  
        return $(this).siblings('.year,.other-data');
    });

//output new html
$('pre.out').text( $('<div/>').html( $('div.list-item').clone() ).html() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="year">xxx1</div>
    <div class="other-data">xxx1</div>
    <div class="item-title">Title 1</div>
    <div class="item-information"></div>
</div>
<div class="list-item">
    <div class="year">xxx2</div>
    <div class="other-data">xxx2</div>
    <div class="item-title">Title 2</div>
    <div class="item-information"></div>
</div>

<h1>NEW HTML</h1>
<pre class="out"></pre>