如何从具有相同属性的一堆元素中获得具有“ aria-hidden”真值的元素？

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> 

Answer 2

使用原始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>