Question

I have this HTML structure

<img  width="25" height="25" src=/data/apple_logo.jpg alt=Chocolate />      
  <input class="cake_checkboxes" style="vertical-align: bottom;"  type="checkbox" name="option[232][]" value="23" id="option-value-23" />
  <label for="option-value-23"> Chocolate</label>
  <br />
<div style='display:none;' class="quantity">
......

If i do

$('.cake_checkboxes:first').next('div')

or

$('.cake_checkboxes:first').next('.quantity')

I get an empty value returned but if i do this

$('.cake_checkboxes:first').next().next().next()

I get the div i need …any ideas on what is wrong or if there is a way to traverse down like the jquery closest method traverses up

Answer 1

next() only returns the next element in the DOM if it matches the selector, otherwise it returns and empty object. So the only thing you could search for using next() is the <label>. Use this instead:

$('.cake_checkboxes:first').nextAll('.quantity').first()

jQuery Docs: nextAll()