javascript - 在 Javascript/jQuery 中创建一个不断变化的列表

Question

好的，我有一个包含 10 个项目的列表，我想让项目 1 每秒移动到列表中的随机位置一次。

不幸的是，我只能让它移动一次，然后尽管数据位置编号每秒持续更新，它仍然保持原状。

setInterval(function randomNumber() {
    var x = Math.floor((Math.random() * 10) + 1);
    $('.listitems #1').attr( 'data-position', x);
}, 1000);

setInterval(function Sort() {
    $(".listitems li").sort(sort_li).appendTo('.listitems');
    function sort_li(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;    
    }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listitems">
     <li id="1" data-position="1">Item 1</li>
     <li data-position="2">Item 2</li>
     <li data-position="3">Item 3</li>
     <li data-position="4">Item 4</li>
     <li data-position="5">Item 5</li>
     <li data-position="6">Item 6</li>
     <li data-position="7">Item 7</li>
     <li data-position="8">Item 8</li>
     <li data-position="9">Item 9</li>
     <li data-position="10">Item 10</li>
</ul>

希望我很好地解释了我的意思，但请随意提问。预先感谢您

Answer 1

.data() 将数据放入 jQuery 数据存储中，但随后更新 .attr()。因此，当您再次获取 .data() 时，它会从存储而不是从属性中获取。

解决方案是使用新的随机数更新 .data()。

setInterval(function randomNumber() {
    var x = Math.floor((Math.random() * 10) + 1);
    $('.listitems #1').data( 'position', x);
}, 1000);

setInterval(function Sort() {
    $(".listitems li").sort(sort_li).appendTo('.listitems');
    function sort_li(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;    
    }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listitems">
     <li id="1" data-position="1">Item 1</li>
     <li data-position="2">Item 2</li>
     <li data-position="3">Item 3</li>
     <li data-position="4">Item 4</li>
     <li data-position="5">Item 5</li>
     <li data-position="6">Item 6</li>
     <li data-position="7">Item 7</li>
     <li data-position="8">Item 8</li>
     <li data-position="9">Item 9</li>
     <li data-position="10">Item 10</li>
</ul>

<小时/>

这是一个非 jQuery 解决方案:

var par = document.querySelector(".listitems")
,   all = Array.from(par.querySelectorAll("li"));

setInterval(function randomNumber() {
    par.querySelector("#one").dataset.position = Math.floor((Math.random() * 10) + 1);
    all.sort((a, b) => b.dataset.position < a.dataset.position ? 1 : -1 )
       .forEach(li => par.appendChild(li)); 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listitems">
     <li id="one" data-position="1">Item 1</li>
     <li data-position="2">Item 2</li>
     <li data-position="3">Item 3</li>
     <li data-position="4">Item 4</li>
     <li data-position="5">Item 5</li>
     <li data-position="6">Item 6</li>
     <li data-position="7">Item 7</li>
     <li data-position="8">Item 8</li>
     <li data-position="9">Item 9</li>
     <li data-position="10">Item 10</li>
</ul>