使用jQuery元素属性附加到匹配的元素

我有一些元素和一个article类。这些元素具有

纸张id

属性。我希望他们移动到相应的div中，该div应该具有class面板-

纸张id

，其中

纸张id

与相应元素的

纸张id

属性相同

我在这里留下一个使用

jQuery（this）

（这显然不起作用）的示例，只是为了说明我需要什么

jQuery('.article').appendTo(".panel-" + jQuery(this).attr('paper-id'));

---

不要使用虚构的属性。对于自定义属性，请始终使用

数据-*

属性

HTML示例：

<div class="article" data-paperid="2"> I'm paper 2 </div>

小提琴：

HTML

<div class='article' paper-id='1'>paper 1</div>
<div class='article' paper-id='2'>paper 2</div>
<div class='article' paper-id='3'>paper 3</div>
<div class='article' paper-id='3'>paper 3</div>
<div class='article' paper-id='4'>paper 4</div>

<div class='panel' panel-paper-id='1'></div>
<div class='panel' panel-paper-id='2'></div>
<div class='panel' panel-paper-id='3'></div>
<div class='panel' panel-paper-id='4'></div>

输出

$('.article').each(function(i, el){
    $("div[panel-paper-id='"+ $(el).attr('paper-id') +"']").append($(this));
});

<div class='panel' panel-paper-id='1'>
    <div class='article' paper-id='1'>paper 1</div>
</div>
<div class='panel' panel-paper-id='2'>
    <div class='article' paper-id='2'>paper 2</div>
</div>
<div class='panel' panel-paper-id='3'>
    <div class='article' paper-id='3'>paper 3</div>
    <div class='article' paper-id='3'>paper 3</div>
</div>
<div class='panel' panel-paper-id='4'>
    <div class='article' paper-id='4'>paper 4</div>
</div>

论文1
论文2
论文3
论文3
论文4

您可以试试这个

$(function(){
    $('.article').each(function(k, v){
        $(".panel-" + $(v).data('paper-id')).append($(v));
    });
});

---

您是否介意发布您的

HTML

示例？请记住

纸张id

不是有效属性，而

数据纸张id

是有效属性。请使用

数据-

前缀作为自定义属性。

$(function(){
    $('.article').each(function(k, v){
        $(".panel-" + $(v).data('paper-id')).append($(v));
    });
});