使用 jQuery 更改 html 位置

Change html position with jQuery

本文关键字：位置 html 更改 jQuery 使用      更新时间：2023-09-26

我正在尝试使用 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 + '"]'));
   });
});

为什么内容要追加两次？

将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 + '"]'));
       });
});

如果您检查您有 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/

我修复了 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));
   });
});
相关文章：