title: More efficient way to do parent().parent().parent() etc. in jquery
body: <p>In this script I'm writing, I find myself using .parent() up to seven times in a row to get elements.  While this works, it seems like there could/should be an easier way to do this/ function I'm unaware of.  Any ideas other than more specific classes/ids on more elements?</p>
  
  <p>Basically, my question boils down to accessing the div with id <code>outer</code> when I have a reference to the span with id 'innerSpan' in the html below:</p>
  
  <pre><code>&lt;div id='outer'&gt;
      &lt;a href="some_url"&gt;
          &lt;span id="inner"&gt;bla bla&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So currently, I would do something like this:</p>
  
  <p><code>var outer = $('#inner').parent().parent()</code></p>
  
  <p>and that gets crazy with deeply nested elements.</p>
  
  <p><strong>Another example:</strong></p>
  
  <p>Here my html:</p>
  
  <pre><code>&lt;div id="options_right"&gt;
              &lt;table id="product_options_list" class="table table-bordered"&gt;
  
              &lt;tbody id="1"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;select name="option_1_val[0]" class="option_table_select"&gt;
                              &lt;option value="Red"&gt;Red&lt;/option&gt;
                              &lt;option value="Blue"&gt;Blue&lt;/option&gt;
                              &lt;option value="Green"&gt;Green&lt;/option&gt;
                              &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;table class="table sub_options" id="0"&gt;
                              &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;select name="option_1_sub[0][]" class="option_table_select  sub_option_select"&gt;
                                          &lt;option value=""&gt;None&lt;/option&gt;
                                          &lt;option value="2"&gt;Size&lt;/option&gt;
                                      &lt;/select&gt;
                                      &lt;div class="sub_option_value_holder"&gt;
                                          &lt;select name="option_1_sub_val[0][]" class="sub_option_values" style="display:none;"&gt;&lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href="#" class="remove_sub_option btn btn-primary"&gt;Remove&lt;/a&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a href="#" class="add_sub_option btn btn-primary"&gt;Add Another&lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
  </code></pre>
  
  <p>and my script. i wrote a function and need to pass it the ids of the main rows tbody as well as the secondary tables id so i can dynamically add more rows.  You don't really need that function for this question but basically i get those ids like so:</p>
  
  <pre><code>get_suboption_row($(this).parent().parent().parent().parent().parent().parent().parent().attr('id'), $(this).parent().parent().parent().parent().attr('id'));
  </code></pre>
  
  <p>thanks</p>
  
  <p>jsFiddle:  <a href="http://jsfiddle.net/Hg4rf/" rel="noreferrer">http://jsfiddle.net/Hg4rf/</a></p>
  
  <p>click the add another to trigger event</p>