Question

Below is my HTML. I’m at the <select> element, how do I get the text from the next span element on the page? I’ve tried several things, including $( this ).nextAll( 'span:first' ).text(); where $( this ) is my select element, but I’m not getting the desire result.

<ul id="questions">
   <div>What do you want information about?</div>
   <li>
      <p>
         <select><!-- This is where I'm at. -->
            <option>Click to select...</option>
            <option data-next_select_name="foos">
               a foo
            </option>
            <option data-next_select_name="bars">
               a bar
            </option>
         </select>
      </p>
      <div>
         <a>
            <span>a foo</span><!-- I want the text out of this span. -->
            <div><b></b></div>
         </a>
         <div>
            <div><input type="text" /></div>
            <ul>
               <li>Click to select...</li>
               <li>
                  a foo
               </li>
               <li>
                  a bar
               </li>
            </ul>
         </div>
      </div>
      <p></p>
   </li>
</ul>

Answer 1

Just incase your html structure changes and .next() isn’t an option, I always prefer to go up to the definitive parent (in this case the list-item)

$(this).closest('li')
       .find('span').first().text();

Random side note: .first() is faster than :first