title: How to identify a parent div for an image that exists within a table cell?
body: <p>I have 2 tables, each of which is contained within different divs, similar to what we see here:</p>
  
  <pre><code>&lt;div id="prices"&gt;
      &lt;table&gt;
          &lt;tr class='hidden-row'&gt;
              &lt;td&gt;
                  &lt;img class='expand-collapse-icon' /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="performance"&gt;
      &lt;table&gt;
          &lt;tr class='hidden-row'&gt;
              &lt;td&gt;
                  &lt;img class='.expand-collapse-icon' /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have some jQuery code that selects hides/shows some of the rows when you click the image. The problem is that it's showing rows from <em>both</em> tables, rather than the table the image exists in.</p>
  
  <p>That's because of the way I'm selecting the rows:</p>
  
  <pre><code>$('.expand-collapse-icon').click(function() {
      $(".hidden-row").toggle(); // it's finding all hidden rows in both tables.
  });
  </code></pre>
  
  <p>I'm having trouble selecting only the rows associated with the current table I've clicked. I tried identifying the specific div I'm in with this:</p>
  
  <pre><code>$('.expand-collapse-icon').parent('td').parent('tr').parent('table').parent('div')
  </code></pre>
  
  <p>but this doesn't work. It just returns a jQuery object with a length of 0, so it's obviously not finding the parent div. Is there a better way of me selecting only the rows that exist within the correct table?</p>