В чем разница между оператором for / in и регулярным оператором for? - Они не то же самое - PullRequest
Новая
       46

В чем разница между оператором for / in и регулярным оператором for? - Они не то же самое

0 голосов
/ 03 октября 2019

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons

На странице, на которую я ссылался выше, слева есть боковая панель.

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

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

Использование click() на родительском элементе ничего не дает, яперепробовал все дочерние и дочерние элементы родительского элемента и обнаружил, что это работает: 

x=document.querySelectorAll(".toggle").children[0].children[1];

Итак, я попытался написать код, который делает click() для всех дочерних элементов, я написал это, и это сработало: 

x=document.querySelectorAll(".toggle");
for(i=0;i<x.length;i++){
    x[i].click();
    y=x[i].children;
    for (j=0;j<y.length;j++){
        y[j].click();
        z=y[j].children;
        for(k=0;k<z.length;k++){
            z[k].click();
        }
    }
}

Поскольку я новичок в JS, я пытался использовать оператор for / in, но он не работал: 

x=document.querySelectorAll(".toggle");
for(i in x){
    x[i].click();
    y=x[i].children;
    for (j in y){
        y[j].click();
        z=y[j].children;
        for(k in z){
            z[k].click();
        }
    }
}

Uncaught TypeError: z[k].click is not a function
at <anonymous>:9:9

Я также пыталсяМетод forEach, и это также не работает: 

x=document.querySelectorAll(".toggle");
var y; var z;
x.forEach(i);
function i(item, index){
    item.click();
    y=item.children;
    y.forEach(j);
}
function j(item,index){
    item.click();
    z=item.children;
    z.forEach(k);
}
function k(item,index){
    item.click();
}

Uncaught TypeError: y.forEach is not a function
at i (<anonymous>:7:4)
at NodeList.forEach (<anonymous>)
at <anonymous>:3:3

Ответы [ 2 ]

2 голосов
/ 03 октября 2019

Как вы выяснили со свойствами children , прослушиватель событий включен li.toggle > details > summary, поэтому вам нужно нажать на этот элемент. Самый простой способ сделать это: 

var x = document.querySelectorAll('li.toggle details summary');
for(var i=0; i < x.length; i++) {
    x[i].click();
}

Вы можете видеть, что этот код запускает событие click для каждого элемента в боковой панели, поэтому не только закрывает открытые, но и открывает закрытые. Однако, когда вы открываете меню, вы видите, что элемент <details> получает атрибут open, поэтому он становится <details open>. Если вы нацелены только на эти элементы, вы получите желаемые результаты: 

var x = document.querySelectorAll('li.toggle details[open] summary');
for(var i=0; i < x.length; i++) {
    x[i].click();
}
1 голос
/ 03 октября 2019

Обратитесь к этому. для элементов цикла и html коллекций.

Не следует использовать для in в html коллекциях. Также в вашей первой функции вы пытаетесь запустить forEach для html-коллекции длиной 1, а не для каждого элемента, который вы захватили.

Если вы хотите использовать цикл for вместо обычного цикла for, просто настройте то, что frzsombor написал так: 

var x = document.querySelectorAll('li.toggle details summary');
for(let element of x) {
    element.click();
}
...