如何从一堆具有相同属性的元素中获取一个``aria idden`为真的元素？

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

您可以使用简单的querySelector或querySelectorAll来实现这一点，不需要任何库或任何循环：

​

console.log(
  document.querySelector('[aria-hidden="false"]').id
);
console.log(
  Array.from(
    document.querySelectorAll('[aria-hidden="true"]'),
    ({ id }) => id
  )
);

<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>

​