Проблема с сборкой элементов документа JavaScript

Я не уверен, что я вообще ошибаюсь, или просто не хватает второстепенного. У меня есть страница, которая имеет разделы, подразделы и подсекции. Последние - это элементы, которые имеют общее форматирование:

<select id="SubSubFlood"  class='hidden'>
    <option></option>
</select>
<select id="SubSubHome"  class='hidden'>
    <option></option>
</select>

Я не могу назвать каждый из них явно, потому что они динамически генерируются, но все они начинаются с «SubSub». Я пытаюсь создать код, который изменит весь SubSubs к классу = «скрытый», а затем изменить один, я хочу, чтобы быть видимым класс = «нескрываемого». Вот моя попытка:

function ShowSubSub(SelectID) {
    var SubSub = document.getElementsByTagName("Select");
    var item;
    for (item in SubSub) {
        if (item.ID.match(/SubSub.*/)) {            
            item.className = 'hidden'
        }
    }
    item = document.getElementById(SelectID);
    item.className = 'unhidden'
}

Где я пропустил лодку? Как получить JavaScript для изменения каждого тега с идентификатором, который начинается с «SubSub» до класса = «скрытый»?

javascript regex for-loop getelementsbytagname

Всего 3 ответа

SubSub будет содержать массив, подобный объекту , поэтому, когда вы помещаете его в for each цикл, вы будете перечислять его свойства, а не сами элементы. Таким образом, элемент в цикле не будет первым выбором, это будет 0 . Я предлагаю изменить его на нормальный цикл

 function ShowSubSub(SelectID) { var SubSub = document.getElementsByTagName("Select"); var item; for (var i =0; i < SubSub.length; i++) { if (SubSub[i].id.match(/SubSub.*/)) { SubSub[i].className = 'hidden'; } } item = document.getElementById(SelectID); item.className = 'unhidden'; } ShowSubSub('SubSubHome')

 .hidden{ display:none; }

 <select id="SubSubFlood" class='hidden'> <option>Flood</option> </select> <select id="SubSubHome" class='hidden'> <option>Home</option> </select>

PS Есть ли какая-то причина для того, чтобы иметь unhidden класс, не можете ли вы просто удалить hidden класс?

Это отвечает на вопрос:

Как получить JavaScript для изменения каждого тега с идентификатором, который начинается с «SubSub» до класса = «скрытый»?

[...document.querySelectorAll('[id^="SubSub"]')].forEach(section => section.className.add('hidden'))

достигнет именно этого.

Итак, давайте сломаем это:

Прежде всего используйте селектор атрибутов, который соответствует всем элементам, которые имеют значение id начиная с SubSub : [id^="SubSub"] .
Запросите документ для всех этих document.querySelectorAll('[id^="SubSub"]') : document.querySelectorAll('[id^="SubSub"]')
Распространяйте NodeList с NodeList вы попадаете в array используя ... (оператор распространения):
```
[...document.querySelectorAll('[id^="SubSub"]')]
```
Кроме того, вы также можете использовать Array.from(iterable) :
```
Array.from(document.querySelectorAll('[id^="SubSub"]'))
```
так что это кросс-браузер безопасно использовать forEach по результату:
```
[...document.querySelectorAll('[id^="SubSub"]')].forEach((section) => {})
```
В этом цикле просто добавьте имя класса в classList :
```
section.className.add('hidden')
```

Проблема в том, что getElementsByTagName возвращает HTMLCollection который «не работает» с «in-in», вместо этого использует

for (let i =0; i<SubSub.length; i++) {
    let item = SubSub[i];
    if (item.id.match(/SubSub.*/)) {            
        item.className = 'hidden'
    }
}

 function ShowSubSub(SelectID) { var SubSub = document.getElementsByTagName("Select"); console.log(SubSub); for (let i =0; i<SubSub.length; i++) { let item = SubSub[i]; if (item.id.match(/SubSub.*/)) { item.className = 'hidden'; } } item = document.getElementById(SelectID); console.log(item); item.className = 'unhidden'; } ShowSubSub('SubSubHome');

 .hidden { background: red; } .unhidden { background: blue; }

 <select id="SubSubFlood" > <option></option> </select> <select id="SubSubHome" > <option></option> </select>

Я также немного улучшил решение connexo :

function ShowSubSub(SelectID) 
{
      [...document.querySelectorAll('[id^="SubSub"]')].map(s => 
        s.id==SelectID ? s.className=('unhidden') : s.className=('hidden')
    )
}

ShowSubSub('SubSubHome');

  function ShowSubSub(SelectID) { [...document.querySelectorAll('[id^="SubSub"]')].map(s => s.id==SelectID ? s.className=('unhidden') : s.className=('hidden') ) } ShowSubSub('SubSubHome');

 .hidden { background: red; } .unhidden { background: blue; }

 <select id="SubSubFlood" > <option></option> </select> <select id="SubSubHome" > <option></option> </select>