Проблема вызова каждого элемента с Jquery

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, top: 60px и следующий слева: 120px, top: 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. Вы должны определить это до начала цикла.