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>

页面上有多个列表项。

在每个列表项中，我需要采取＆＃34;年＆＃34;和＆＃34;其他数据＆＃34;并从项目标题上方删除它并附加到项目信息＆＃34;。

我尝试了以下内容：

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

这不能正常工作，因为它基本上需要＆＃34;年＆＃34;的所有实例。并将其附加到＆＃34; item-information＆＃34; - 如果页面上有3个项目，则每个项目最终显示3个＆＃34;年份＆＃34;在每个＆＃34;项目信息＆＃34;。

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

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

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

jQuery仅在父div中移动/追加具有相同类名的多个项目

2 个答案: