Я пытаюсь добавить класс в тег li с отключенным классом.

Question

Как написать условный оператор JavaScript:

If an li tag has a class of "disabled" then add a class of "hide"

Я пытаюсь добавить этот класс в тег li, который имеет этот класс.У тега li нет идентификатора.

Answer 1

Сначала вы должны получить все li теги:

var lis = document.getElementsByTagName('li');

Затем зациклите их и выполните действие:

for(var i = lis.length; i--;) {
    var li = lis[i];
    if(/\bdisabled\b/.test(li.className)) {
        li.className += ' hide';
    }
}

Ссылка: getElementsByTagName, className

Почему мы не можем использовать getElementsByClassName?

Поскольку не поддерживается вплоть до IE8 .

---

Но вы можете проверить, поддерживает ли браузер querySelectorAll:

if(typeof document.querySelectorAll === 'function') {
    var lis = document.querySelectorAll('li.disabled');
    for(var i = lis.length; i--;) {
        lis[i].className += ' hide';
    }
}
else {
    // code from above
}

---

Если у вас есть ссылка на какой-то li, вы используете только класс if:

if(/\bdisabled\b/.test(element.className)) {
    element.className += ' hide';
}

(Во всех случаях вы также можете добавить дополнительный тест, чтобы проверить, есть ли у элементов класс hide.)

---

Обновление:

Если вы хотите снова удалить этот класс, вы можете сделать аналогичный цикл и использовать replace:

for(var i = lis.length; i--;) {
    var li = lis[i];
    li.className = li.className.replace(/\s*hide\s*/, '');
}

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

Answer 2

Хм, ВСЕ отключенные элементы LI нуждаются в классе скрытия?Разве вы не можете редактировать CSS и скрывать их таким образом?Или используйте JavaScript для добавления класса в элемент HTML или BODY, а затем в CSS, например:

HTML.hide-disabled LI.disabled {/ * свойства, чтобы скрыть эти элементы * /}

Answer 3

Если вам нравится jQuery:

$('li').hasClass('disabled').addClass('hide');

(прямо упомяните hasClass только для справки и ясности, хотя li.disabled работает также хорошо).

var items = document.getElementsByTagName('li');
for (var i = 0; i < items.length; i++){
    var item = items[i];
    if (/\bdisabled\b/.test(item.className)){
        item.className += ' hide';
    }
}

Answer 4

Использование jQuery:

$('li.disabled').addClass('hide');