javascript - 如何逐步遍历兄弟元素

Question

我正在尝试遍历 6 个 Div 并为每个 Div 提供一个唯一的 ID。我确信下面的代码会起作用，但它所做的只是给第一个 Div“slide1”，其余的都得到“slide6”。完成此步骤的正确方法是什么？

    $('#main-slider div.et_pb_slide').first().attr('id','slide1');

    $('#main-slider div.et_pb_slide').next().attr('id','slide2');

    $('#main-slider div.et_pb_slide').next().attr('id','slide3');

    $('#main-slider div.et_pb_slide').next().attr('id','slide4');

    $('#main-slider div.et_pb_slide').next().attr('id','slide5');

    $('#main-slider div.et_pb_slide').next().attr('id','slide6');

Answer 1

环形！

$('#main-slider div.et_pb_slide').each(function(index) {
    this.id = "slide" + (index + 1);
});

Answer 2

您应该执行以下操作：

$('#main-slider div.et_pb_slide').each(function(value, index) {
$(this).attr('id','slide'+index);
}); 

Answer 3

在这里没有其他答案，您应该将您的 jQuery 调用链接在一起 - 出于性能原因和 DOM 选择器的准确性：

$('#main-slider div.et_pb_slide')
    .first().attr('id','slide1')
    .next().attr('id','slide2')
    .next().attr('id','slide3')
    .next().attr('id','slide4')
    .next().attr('id','slide5')
    .next().attr('id','slide6');

Answer 4

$( "#main-slider div.et_pb_slide" ).each(function( index ) {
  $(this).attr('id', 'slide' + (index + 1));
});

Answer 5

1.) 使用选择器获取所有 div

2.) 通过附加每个 div 索引来应用唯一 id。

    var $divs = $("#main-slider div.et_pb_slide");
    $divs.attr('id', function (index) {
        return 'slide' + index;
    });