Question

Using jQuery and the HTML below, can someone please suggest what’s the best (ie. most efficient) way to retrieve span.street_address_display from $(“input”). Thanks.

<tr>
<th class="address_name" scope="row">Work</th>
<td class="address_entry">
  <span class="street_address_display">123456 ABC Street</span> 
  <span class="city_display">Vancouver</span>,  
  <span class="state_province_display">British Columbia</span>  
  <span class="country_display">Canada</span>   
  <span class="post_code_display">V1A2B3</span> 
</td>
<td class="address_select"><input value="address_2" name="address_select" type="radio" /></td>
</tr>

Answer 1

If you’re calling it within a function that has this being scoped to the input (otherwise you need to replace this with something that grabs the input), something like

$(this).parent().prev().children('span.street_address_display')

should take you to the span. As far as efficiency, I’d say the biggest place you’ll notice differences will be something like IE, or places that can’t grab by Tag or Class.

Mind you, this is doing direct lookups, so one level up with .parent() rather than going up until you find a td, the previous td and then only direct children of that td that are span and have the class street_address_display. This won’t scrape deeply, so you’re losing flexibility, but less look ups translates to faster. It’s up to you if it’s worth it.