How to identify a parent div for an image that exists within a table cell?
<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>
