javascript - 如何从一堆具有相同属性的元素中获取值为 `aria-hidden` true 的元素？

Question

我正在尝试循环遍历所有将 aria-hidden 设置为 false 或 true 的元素列表，在我的情况下，只有一个元素将其设置为 true，所以我需要了解当前可见哪一个。

标记:

<div id="screen-1" class="setup-step-screen" aria-hidden="false"></div>
<div id="screen-2" class="setup-step-screen" aria-hidden="true"></div>
<div id="screen-3" class="setup-step-screen" aria-hidden="true"></div>

因此，我想检索 screen-1 的 id:

var current_step = $('.setup-step-screen').each( function(i, obj) {
    if( $(obj).attr('aria-hidden') === 'false') {
        return $(obj).attr('id');
    }
});
console.log( current_step);

问题是，这返回:

a.fn.init(2) [div#screen-1.setup-step-screen, div#screen-2.setup-step-screen, selector: ".setup-step-screen", prevObject: n.fn.init(1), context: document]

这是因为它不知道何时停止each，我相信，因此，这段代码是有效的:

var current_step;
$('.setup-step-screen').each( function(i, obj) {
    if( $(obj).attr('aria-hidden') === 'false') {
        current_step = $(obj).attr('id');
    }
});

console.log(current_step);

但我想在each内进行分配。

如何解决这个问题？

Answer 1

使用普通 JavaScript

您可以在方法 .querySelector 中使用 CSS 选择器。对于你的情况

document.querySelectorAll('div[aria-hidden="false"]')

将返回所有 aria-hidden 设置为 false 的 div 元素。

这是代码:

const selection = document.querySelectorAll('div[aria-hidden="false"]')

console.log(selection)

<div id="screen-1" class="setup-step-screen" aria-hidden="false"></div>
<div id="screen-2" class="setup-step-screen" aria-hidden="true"></div>
<div id="screen-3" class="setup-step-screen" aria-hidden="true"></div>

<小时/>

使用 jQuery

如果你想使用 jQuery，同样可以应用:

var current_step;
$('div[aria-hidden="false"]').each( function(i, obj) {
    current_step = $(obj).attr('id');
});

console.log(current_step);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="screen-1" class="setup-step-screen" aria-hidden="false"></div>
<div id="screen-2" class="setup-step-screen" aria-hidden="true"></div>
<div id="screen-3" class="setup-step-screen" aria-hidden="true"></div>