为每个 wordpress post 和 javascript 应用交错和随机的左/右放置

Question

所以我试图让 WordPress 网站上的每个人 post (.card) 交错排列，一些在左边，一些在右边，并且这是一个随机数量，并且刷新页面时发生变化。

这是我使用 JavaScript 代码来尝试执行此操作的地方：

//random position 

$(document).ready(function () {
    $('.card').each(function () {
        $('.card').css({
            'left': (Math.random() * 900) + 50
        })
    });
});

我觉得我没有正确使用 'each' 方法？它随机将它们放在左/右，但它对所有 post 应用相同的距离，而不是每个都在不同的距离。

我哪里错了？

Answer 1

尝试以下操作并通过 this question

了解有关 this 关键字的更多信息

$(document).ready(function(){
  $('.card').each(function() {
    $(this).css({'left' : (Math.random() * 900) + 50})
  });
});

为每个 wordpress post 和 javascript 应用交错和随机的左/右放置

Applying staggered and randomised left / right placement for each wordpress post with javascript

javascript

jquery

css

random

each