为同一类的元素指定不同的元素ID

Question

整个上午都在这里，我就是不能让它做我想做的事。

我一直在使用jQuery，我只是在学习。

我的页面有6个部分，有些有id，有些没有。他们都属于同一类。

我的目标是找到每个部分并将ID设置为特定值。"A"B"等等……我不知道如何做到这一点，所以我的计划是创建一个循环，并将id设置为"section1"section2"。。。。。然后返回并将它们更改为文本值。

不理想，而且无论如何都不起作用。这就是我所做的，结果是所有的区段id都设置为"区段5"。

我理解它为什么这么做。循环是找到部分并将所有id设置为"section0"，然后重新开始。我只是不知道该怎么修。

此外，将id从"section5"更改为"F"也不起作用。

<script>
$(document).ready( function () {
for(var i=0;i<6;i++){
$('section.page-section').attr('id','section'+i+'');
}
$('#section0').attr('id', 'A');
$('#section1').attr('id', 'B');
$('#section2').attr('id', 'C');
$('#section3').attr('id', 'D');
$('#section4').attr('id', 'E');
$('#section5').attr('id', 'F');
});
</script>

提前感谢！

Answer 1

您选择的是每个循环上的所有元素，而不是要更改的索引处的当前元素。

var sections = $('section.page-section')
for (var i = 0; i < 6; i++) {
sections.eq(i).attr('id', 'section' + i + '');
}
$('#section0').attr('id', 'A');
$('#section1').attr('id', 'B');
$('#section2').attr('id', 'C');
$('#section3').attr('id', 'D');
$('#section4').attr('id', 'E');
$('#section5').attr('id', 'F');

.page-section::before {
content: attr(id)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>

我的方法是使用attr方法，它会给你索引。你返回的是它将设置的内容。并制作了一个函数，这样您就不必对选择器进行硬编码来设置字母。

function genChar(offset) {
var start = "A".charCodeAt(0);
return String.fromCharCode(start + offset);
}
var sections = $(".page-section").attr("id", function (index) {
return genChar(index)
})

.page-section::before {
content: attr(id)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>

Answer 2

您可以使用prop方法将要执行的隐式循环，并使用传入的索引来知道id应该设置为什么。

$('section.page-section').prop('id', function(index){
return 'section'+ index;
});
console.log(
$('section.page-section').get()
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>

Answer 3

您可以使用:eq()重写第一次尝试，如下所示：

for(var i=0;i<6;i++){
$('section.page-section:eq(' + i + ')').attr('id','section'+i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section">1</section>
<section class="page-section">2</section>
<section class="page-section">3</section>
<section class="page-section">4</section>
<section class="page-section">5</section>
<section class="page-section">6</section>