用jQuery更改html位置

Question

我试图在数组函数中使用jQuery更改某些列表的位置

http://jsfiddle.net/6r5jp5Lk/9/

$('div').each(function() {
   var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
   list = $(this).find('ul');                     

   $.each(answer, function(index, value) {
      list.append($('li[data-order="' + value + '"]'));
   });

});

为什么内容会追加两次？

Answer 1

将您的div更改为.list并且工作正常

$('.list').each(function() {
   var answer = JSON.parse('[' + $(this).find('.order').val() + ']'),
       list = $(this).find('ul');                     

       $.each(answer, function(index, value) {
          list.append($('li[data-order="' + value + '"]'));
       });

});

Answer 2

如果您检查了4个div标签，则不会关闭div标签。检查更新的jsfiddle。

<div>
<ul class="list">
    <li data-order="1">1</li>
    <li data-order="2">2</li>
    <li data-order="3">3</li>
    <li data-order="4">4</li>
    <input class="order" type="hidden" value="4,2,1,3" />
</ul>
</div>
    
<div>
<ul class="list">
    <li data-order="1">1</li>
    <li data-order="2">2</li>
    <li data-order="3">3</li>
    <li data-order="4">4</li>
    <input class="order" type="hidden" value="3,2,4,1" />
</ul>
</div>

 

http://jsfiddle.net/6r5jp5Lk/16/

Answer 3

我修复了http://jsfiddle.net/6r5jp5Lk/15/

$('.list').each(function() {
   var answer = $(this).find('.order').val().split(','),
   list = $(this);

   $.each(answer, function(index, value) {
      list.append($('li[data-order="' + value + '"]', list));
   });

});