附加具有类似rel值的内容

Question

我想我被困在这里了。我希望根据rel相似性将源的内容附加到它的目标容器中。

<div class="targets">
<div class="target target-1" rel="1">container 1</div>
<div class="target target-2" rel="2">container 2</div>
<div class="target target-3" rel="3">container 3</div>
</div>

<div class="sources">
<div class="source source-1" rel="1">source 1 content to append to container 1</div>
<div class="source source-2" rel="2">source 2 content to append to container 2</div>
<div class="source source-3" rel="3">source 3 content to append to container 3</div>
</div>

因此，要附加到容器1的源1内容应该附加到容器1中。

我试过：

var rel_attr = $(this).attr('rel');
$('.source-' + rel_attr).appendTo('.target-' + rel_attr);

但没有结果。我一定是漏掉了什么。

谢谢你的帮助。

Answer 1

它不工作，因为$(这个)没有指向某个地方。尝尝这个

jQuery('.sources .source').each( function () {

    var content = jQuery(this).html(); //or .text();
    var rel = jQuery(this).attr('rel');

    jQuery('.targets .target-'+rel).html(content); // or .text() again;
    jQuery(this).hide();
    //use jQuery(this).html(''); if you do not want to hide the div

} );

http://jsfiddle.net/9YkSs/

Answer 2

$('.source').each(function()
{
  $(this).appendTo($('.targets').find('div.target[rel='+$(this).attr('rel')+']'));
})

Answer 3

如果您真的希望从“源”包装器中删除“源”DIVs并将其放置在相关的“目标”DIVs中，请尝试如下

$(".source ").each(function(){
    var rel_attr = $(this).attr('rel');
    $('.source-' + rel_attr).appendTo('.target-' + rel_attr);
});