title: How do I get an element with `aria-hidden` true out of a bunch of elements that have the same attribute?
body: <p>I'm trying to loop through a list of elements that all have <code>aria-hidden</code> 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.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div id="screen-1" class="setup-step-screen" aria-hidden="false"&gt;&lt;/div&gt;
  &lt;div id="screen-2" class="setup-step-screen" aria-hidden="true"&gt;&lt;/div&gt;
  &lt;div id="screen-3" class="setup-step-screen" aria-hidden="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As such, I'd like to retrieve <code>screen-1</code>'s id:</p>
  
  <pre><code>var current_step = $('.setup-step-screen').each( function(i, obj) {
      if( $(obj).attr('aria-hidden') === 'false') {
          return $(obj).attr('id');
      }
  });
  console.log( current_step);
  </code></pre>
  
  <p>Problem is, this returns:</p>
  
  <pre><code>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]
  </code></pre>
  
  <p>This is because it doesn't know when to stop the <code>each</code>, I believe, as such, this piece of code works:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>But I'd like to make the assignment within the <code>each</code>.</p>
  
  <p>How do I fix this?</p>