Loading...

Search jQuery

Search

jQuery Forum

rienheuver

jQuery and selectors, I always seem to struggle.

in Using jQuery • 12 years ago

Heey there jQuery community :)

I have a problem, which I hope you can solve.

I'm using jQuery this time to create a dropdown menu.

Here is my html code (partially, only the relevant part):

<table>
<tr>
<th><a href="#">Info</a></th>
</tr>
<tr><td>Products</td></tr>
<tr><td>Prices</td></tr>
<tr><td>Location</td></tr>
<tr><td>F.A.Q.</td></tr>
</table>

Here is the relevant part of the css:

td {
display: none;
}

Now what I want should be obvious: When you hover the <th>, the other <td> should display, and onmouseout they should dissapear of course.

Here is the jQuery I came up with but which doesn't work so far:

$(document).ready(function() {
$("table").hover(function() {
$(this).children().children().show();
}, function() {
$(this).children().children().hide();
});
});

The children() part probably doesn't make too much sense but I've accomplished many things spamming parents and children :P

Can someone please help me out by telling me how to properly select all the td's and showing them?

Thanks in advance!

Greets,

Rien Heuver

1

Replies(3)

jay.blanchard

Re: jQuery and selectors, I always seem to struggle.

12 years ago

Try this;

$("table").hover(function() {
$(this).find('td').show();
}, function() {
$(this).find('td').hide();
});

Hope this helps!

rienheuver

Re: Re: jQuery and selectors, I always seem to struggle.

12 years ago

Wow... you're good!

Could you perhaps explain to me how find works exactly? I never heard of this function but it seems to do magic!

Thanks a lot!

jay.blanchard

Re: jQuery and selectors, I always seem to struggle.

12 years ago

That does work well, but I'd rather do this...

$("th").hover(function() {
$(this).parents().find('td').show();
}, function() {
$(this).parents().find('td').hide();
});

That way each table head could have its own list.

Here is how it works for the first example using 'table' as the selector - find is a descendant selector. It will find all children, grandchildren and so on of whatever $(this) is and you can specify which children to look for. The td's are grandchildren of table.

<table>
<tr> child of table
<th> child of tr, grandchild of table
<a href="#">Info</a> child of th, grandchild of tr, great grandchild of table
</th>
</tr>
<tr> child of table, sibling of trs
<td>Products</td> child of tr, grandchild of table
</tr>
<tr><td>Prices</td></tr>
<tr><td>Location</td></tr>
<tr><td>F.A.Q.</td></tr>
</table>

The second example gets the ancestors of the 'th' because those ancestors are also the grand/parents of th's siblings - the tr's. The td's are children of the tr's and grandchildren of the table. I hope this helps.