title: How to find the next element which has an ID attribute using jQuery
body: <p>When I click on a link, I need to find the next <code>&lt;section&gt;</code> that has an ID attribute and return its ID.</p>
  
  <p>So given the following markup and javascript, I would expect clicking on the link to write "section_3" to the console.</p>
  
  <pre><code>&lt;section id="section_1"&gt;
      &lt;a href="#" class="findNext"&gt;Find&lt;/a&gt;
  &lt;/section&gt;
  &lt;section&gt;&lt;/section&gt;
  &lt;section id="section_3"&gt;&lt;/section&gt;
  &lt;section id="section_4"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('a.findNext').click(function() {
      var nextSectionWithId = $(this).closest("section").next("section[id]");
      if (nextSectionWithId) {
          var sectionId = nextSectionWithId.attr('id');
          console.log(sectionId)
      }
  });
  </code></pre>
  
  <p>But this doesn't work. I have set <a href="http://jsfiddle.net/J2ZJ9/1/" rel="nofollow">the code up here in jsFiddle</a>.</p>
  
  <p>Any ideas why this is not working?</p>