Css order属性不't在Jquery设置时更新

Css order property doesn't update when set by Jquery

本文关键字：Jquery 设置 更新 属性 order Css      更新时间：2023-09-26

当元素在dom上如此渲染后更新其order属性时，html元素无法重新排序。

$(".test").css('order', '0');

这是一个已知的问题吗？

编辑：是的，容器具有以下css属性：

display: flex;
flex-direction: column;
overflow-y: overlay;
overflow-x: hidden;
position: relative;

编辑：fiddle中显示错误https://jsfiddle.net/me6g30ur/

我的代码：

$(".update").on("click", function() {
    for (var i = 0; i < $(".child").length; i++) {
      $(".child").css("order", Math.floor(Math.random * 100));
    }
  });

的代码有两个错误

  1. Math.random是一个函数，因此您需要执行Math.random()

  2. 您需要选择要更新的子元素。您可以将:eq(index)选择器用于该

最终代码：https://jsfiddle.net/me6g30ur/3/

  $(".update").on("click", function() {
    for (var i = 0; i < $(".child").length; i++) {
        var order = Math.floor(Math.random() * 100);
      $(".child:eq(" + i + ")").css("order", order);
    }
  });

旁注：

最好使用jquery的.each循环，而不是for循环，这样可以减少查询。

然后在循环中，您可以执行this.style.order = Math.floor(Math.random() * 100);

相关文章：