Question

整天早上，我无法让它做我想做的事。

我一直在使用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>

谢谢！

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>

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

3 个答案: