Jquery and .parent()

Question

Given the following markup and JS, why does the first statement work and the seond not?

jQuery

$('.selector').change(function () {
  // does work
  $(this).parent(".controls").after( "<div class=\"control-group\">Test</div>" );

  // doesn't work
  $(this).parent(".control-group").after( "<div class=\"control-group\">Test</div>" );
}

HTML

<div class="control-group">
  <label class="control-label" for="description">Section Type</label>
  <div class="controls">
    <select class="selector">
      // options
    </select>
  </div>
</div>

Answer 1

You should use:

• .closest() , which gives you only the first element matching that selector (starting at the currently selected element), or
• .parents() to give you all the parents matching that selector (starting at the currently selected element's parent).

The .parent() method only travels a single level up the DOM tree .

Answer 2

BAH! I should have RTFM!

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree