Проблема, вызывающая каждый элемент с помощью JQuery

Question

Я пытаюсь создать новый элемент div, а затем изменить его позицию с помощью Jquery.But 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

Во-первых, вы должны знать, что вы можете не иметь более одного элемента на странице с тем же идентификатором. Вместо этого вы должны сделать класс 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. Вам нужно определить ее до начала цикла.