Question

我正在尝试创建新的div元素然后用Jquery更改它的位置。但是J查询效果只有第一个元素。我想用不同的数字更改所有元素的位置。

<div class="userList">
<?php $categories = find_category();

    foreach($categories as $category): ?>
<div id="user">
 <img id="<?php echo $category['cat_id']; ?>" src="<?php echo $category['cat_image']; ?>" />
 <a></a>
</div>
 <?php endforeach ;?>
</div>

如果我在Jquery中制作

 var a= 60;
$(".userList").children().css({'left':a+'px' ,'top':a+'px'});
  a+=60;

这会将所有<div id="user">更改为<div id="user" style="left: 60px; top: 60px; "> 但我需要先做一个：60px上：60px，下一个左：120px上：120px。

我还使用.each函数，如

$(".userList").each(function(){

    $("#user").css({'left':a+'px' ,'top':a+'px'});
                a+=60;

                });

但这次只有<div id="user">改为<div id="user" style="left: 60px; top: 60px; ">而另一个没有影响。

Answer 1

首先，您应该知道不在具有相同ID的页面上有多个元素。你应该让user成为一个班级。

关于此问题，您可以使用.each()循环，并将60乘以当前index（加一）。

这将给你60，然后120,180,240等

var a= 60;
$(".userList").children().each(function( idx ) {
    var position = a * (idx + 1);
    $(this).css({'left': position ,'top': position});
});

Answer 2

您设置css的部分是您正在使用的代码吗？如果是这样，看起来每次迭代都会设置a = 60.您需要在循环开始之前定义它。

用Jquery调用每个元素的问题

2 个答案: