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));
    });
});

An Example.

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);
    });

});

<子> Data attribute reference + guide

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

3 个答案: