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

Question

I'm trying to loop through a list of elements that all have aria-hidden set to either false or true, in my case, only one element has it set to true, so I need to know which one is currently visible.

Markup:

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

As such, I'd like to retrieve screen-1 's 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);

Problem is, this returns:

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]

This is because it doesn't know when to stop the each , I believe, as such, this piece of code works:

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

But I'd like to make the assignment within the each .

How do I fix this?

Answer 1

You can achieve this with a simple querySelector or querySelectorAll , no library nor any loops required:

 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

Using vanilla JavaScript

You can use a CSS selector inside the method .querySelector . In your case

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

Will return all div elements that have aria-hidden set to false .

Here is the code:

 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> 

---

Using jQuery

If you want to use jQuery, the same can be applied:

 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>