为同一类的元素分配不同的元素 ID

瑞安

整个上午都在这,我就是无法让它做我想做的事。

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

我的页面有 6 个部分,一些有 id,有些没有。他们都共享同一个类。

我的目标是找到每个部分并将 ID 设置为特定值。“A”“B”等等....我不知道如何完成这个,所以我的计划是创建一个循环并将id设置为“section1”“section2”.....然后回去并将它们更改为文本值。

不理想,无论如何它都不起作用。这就是我所做的,结果是所有的部分 ID 都设置为“section5”。

我明白为什么它正在做它正在做的事情。循环正在查找部分并将所有 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>

提前致谢!

埃帕斯卡雷洛

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

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在鼠标悬停时更改同一类元素的 CSS,具体取决于每个元素的 id

如何使用 JQuery 根据文本值为同一类的多个元素分配不同的属性

同一元素上的不同CSS通过ID,类等

为CSS样式分配JavaScript数组元素类或ID

为同一类的所有元素分配背景颜色

为使用insertAdjacentHTML创建的HTML元素分配唯一的ID

检测点击同一类或元素的不同索引

如何返回从同一类继承的不同元素的数组?

D3js中每个元素的唯一类或ID

如何为每个元素分配不同的ID

我可以在类上然后在id上为同一元素使用datepicker吗?

jQuery-为元素分配ID

jQuery如果元素ID存在,则将类添加到同一元素

同一类的多个元素

如何分配唯一的DOM元素ID

设置一类的不同元素的样式

使用Selenium在同一类的两个不同的div中查找不同的元素

为什么在同一<text> </ text>元素内@ID变量呈现的方式不同

将文本分配给同一类的多个元素

在HTML文档中找到一个单词,然后为该元素分配ID /类

R-为列表中的每个Spatial_DataFrame元素分配唯一ID

为列表中的每个data.frame元素分配唯一的ID

jQuery选择器:同一类的子元素在不同类的div中

如何从jquery中属于同一类的成员的元素中获取所有不同的值?

合并共享一个类的2个菜单ID元素,并为该类添加不同的背景

flask-restful具有get / <id>并在同一类中使用json发布

JQuery:如何选择一个没有ID为父的元素的类?

如何计算同一类的元素数量?

测量同一类别的元素的总高度