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

Question

我有一些带有文章类的元素。这些元素有一个paper-id属性。我希望它们移动到相应的 div 中，该 div 应该具有类面板-paper-id其中与相应元素paper-id的属性相同。paper-id

我在这里留下一个使用示例jQuery(this)（显然行不通），只是为了展示我需要什么

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

Answer 1

小提琴：http: //jsfiddle.net/6B9xk/3/

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>

JavaScript

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

Answer 2

你可以试试这个

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

一个例子。

Answer 3

不要使用发明的属性。对于自定义属性，请始终使用data-*属性。

HTML 示例：

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

jQuery：

jQuery(function( $ ) {

    $('.article').each( function() {
         var myDataId = $(this).data('paperid');
         $(this).appendTo('.panel'+ myDataId);
    });

});

_{数据属性参考+指南}