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').appendTo('.item-information');
$('.other-data').appendTo('.item-information');

这无法正常工作，因为它基本上会接受所有“ year”实例并将其附加到“ item-information”中-因此，如果页面上有3个项目，则每个项目最终都会在其中显示3个“ year”实例每个“项目信息”。

为了解决这个问题，我知道我需要某种陈述来选择列表项，在该列表项中找到年份和其他数据，然后在同一列表项中找到项信息，并将其附加到那里。] >

问题是，我不确定如何构造该语句，我尝试了以下操作，但出错了：

$('.list-item').find('.year').appendTo(function({
    $(this).find('.item-information');
});
有人可以帮我解决我想做的正确结构吗？

谢谢。

我有一个具有以下结构的动态生成的页面：

xxx1

xxx1

<...>

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()：