Присвоение разных идентификаторов элементов элементам одного класса

Question

Занимался этим все утро, и я просто не могу заставить его делать то, что я хочу.

Я использовал jQuery, который я только учу.

Моя страница содержит 6 разделов, некоторые имеют идентификаторы, а некоторые нет. Все они имеют один и тот же класс.

Моя цель - найти каждый раздел и установить для идентификатора значение c. "A", "B" и так далее ... Я не знаю, как это сделать, поэтому я планировал создать al oop и установить идентификаторы в "section1", "section2" ... .. затем go назад и измените их на текстовые значения.

Не идеально, и это все равно не сработало. Это то, что я сделал, в результате все идентификаторы разделов были установлены на «section5».

Я понимаю, почему он делает то, что делает. L oop находит разделы и устанавливает ВСЕ идентификаторы на «section0», а затем начинает заново. Я просто не уверен, как это исправить.

Кроме того, изменение идентификатора с "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

Вы выбираете ВСЕ элементы каждого l oop, а не текущий элемент в индексе, который хотите изменить.

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

Вы можете переписать свою первую попытку, используя :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>

Answer 3

Вы можете использовать неявный цикл, который будет делать метод prop, и использовать переданный индекс, чтобы знать, как должен быть установлен идентификатор.

$('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>