Изменить идентификатор элемента, где класс равен X

Question

Я пытаюсь изменить идентификатор div через Ajax.
Поскольку идентификатор имеет динамическое значение, я добавил класс в div.

Мой php код:

    echo '<div id="pagemenu">
            <ul id="tabpanel">';
$tel = 0;
while($totaalklanten > -4)
{
    $tel++;
    echo '<li><a href="#'.$tel.'" name="'.$tel.'" onclick="listklant(\'klant.php\',this.name)">'.$tel.'</a></li>';
    $totaalklanten = $totaalklanten - 5;
}
echo '</ul>';
echo '<div class="changeme" id="default">';
//Lots of query of php stuff here to execute
echo '</div>

Див с классом 'changeme' является жертвой.

Мой код Ajax:

xmlhttp = new XMLHttpRequest();

function listklant(serverPage, pagenum)
{
    xmlhttp.open("GET", serverPage);



    document.getElementsByClassName('changeme').id = pagenum;
    alert(document.getElementById(pagenum));
    alert(document.getElementsByClassName('changeme').id);


    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

Первое предупреждение дает мне «ноль»: (...
Тем не менее, второе предупреждение дает мне правильное значение, поэтому «pagenum» был успешно применен.
Что я делаю неправильно? И как это исправить?
(Если есть что-то еще, что я могу улучшить, пожалуйста, крикни)

Answer 1

document.getElementsByClassName('changeme').id = pagenum;

Эта строка кода не устанавливает id элементов с классом changeme.getElementsByClassName возвращает NodeList, содержащий элементы.Вы устанавливаете id свойство на NodeList.Очевидно, это не отражается на элементах в списке.

Для этого работайте над самими элементами.Если у вас есть один элемент с классом, это просто:

document.getElementsByClassName('changeme')[0].id = pagenum;

Если у вас есть больше элементов, вам понадобится цикл:

var els = document.getElementsByClassName('changeme');
for (var i = 0; i < els.length; i++ ) {
    els[i].id = pagenum;
}

Однако, это, вероятно, плохоидея изменить элемент id.Использование класса вполне может быть лучшей идеей.

---

Edit Чтобы объяснить, почему ваш второй alert работает, это потому, что при вызове возвращается то же самое NodeListдо getElementsByClassName.Начиная с спецификации :

Когда метод [getElementsByClassName] снова вызывается для объекта HTMLElement с тем же аргументом, пользовательский агент может вернуть тот же объект, что и объектвозвращается по предыдущему звонку.