使用 querySelector 在 for 循环中获取属性答案

【问题标题】：getAttribute in a for-loop using querySelector使用 querySelector 在 for 循环中获取属性
【发布时间】：2017-08-18 19:38:04
【问题描述】：

我有这个变量

var carouselItems = document.querySelectorAll(".carouselItem")

这是为了访问这些东西

                %div#carouselMain.row
                %div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art0"}}
                    %a{:href => "#"}
                        %div.featured-number
                            01
                        %div.featured-cat
                            Personal Article
                        %h3
                            TITLE
                %div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art1"}}
                    %a{:href => "#"}
                        %div.featured-number
                            02
                        %div.featured-cat
                            Visual Essay
                        %h3
                            TITLE
                %div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art2"}}
                    %a{:href => "#"}
                        %div.featured-number
                            03
                        %div.featured-cat
                            1st Year Feature
                        %h3
                            TITLE
                %div.col-xs-12.col-sm-3.carouselItem{:data => {:image => "images/art3"}}
                    %a{:href => "#"}
                        %div.featured-number
                            04
                        %div.featured-cat
                            Interview
                        %h3
                            TITLE

我创建了一个函数，它有一个 for 循环来访问每个 div 和 URL 以获取其他内容，这里是 JS 代码：

function marqueeGatherData() {
    [].forEach.call(carouselItems, function(index) {
        marqueeVars.totalPanels = index + 1
        for (var j = 0; j < carouselItems.length; j++) {
            if (carouselItems[j].length) {
                var panel_image = this.getAttribute("data-image" + ".png"),
                    panel_caption = this.getElementsByTagName("h3").innerHTML,
                    panel_link = this.getAttribute("href"),
                    panel_category = this.querySelectorAll(".featured-cat").innerHTML,
                    panel_number = this.querySelectorAll(".featured-number").innerHTML
            }
        }
*random stuff*
})
}

但是当你注意到时问题就出现了

console.log(panel_caption)

正在返回 4 个未定义的值，这意味着该变量无法将自身链接到其适当的 div。我将如何解决这个问题？我试过添加for循环变量，但没有做任何事情。这与在 DOM 加载之前调用我的函数有什么关系吗？

【问题讨论】：

[].forEach.call(carouselItems, function(index) { 的意义何在？
我之前使用getElementsByClassName 将你的元素放在一个数组中，所以我想访问它。
你不能这样使用词法this。自己测试这个例子：[{a:1},{a:2}].forEach(function() { console.log(this.a); })

标签： javascript arrays function if-statement for-loop

【解决方案1】：

除非我误解了什么，为什么不干脆做：

function marqueeGatherData() {
    carouselItems.forEach(function(item, index) {
        marqueeVars.totalPanels = index + 1;
        //var panel_image = item.getAttribute("data-image" + ".png"),
        var panel_image = item.dataset.image,
            panel_caption = item.getElementsByTagName("h3").innerHTML,
            panel_link = item.getAttribute("href"),
            panel_category = item.querySelectorAll(".featured-cat").innerHTML,
            panel_number = item.querySelectorAll(".featured-number").innerHTML;

        // random stuff
    });
}

forEach 的第二个参数是index。

旁白： item.getAttribute("data-image.png") 看起来不正确，因为属性不能包含句点。如果您想访问数据属性的值，例如data-image，使用 dataset 属性，例如item.dataset.image。

【讨论】：