You can save a reference to the child elements (if they'll not change)
to avoid finding them over and over:
$("#parent").each(function(){
var $child = $(this).find('.child');
var $children = $('.child');
$(this).hover(function(){
$c.show();
},function(){
$children.hide();
});
});
On Mar 4, 2:50 am, schickb <schi...@gmail.com> wrote:
> I'd like to apply a css effect to a child upon hovering over its
> parent. Both are block level elements. The trick is that there is a
> list of these and I only want to modify one at a time. I've got
> something that works, but it feels a bit ugly:
>
> $("#parent").hover(
> function(){
> // This is the line in question.
> $('#' + this.id + ' .child').show();
> },
> function(){
> // Hide them all
> $('.child').hide();
> }
> );
>
> I could use Ids on the children that are derived from their parents,
> but that doesn't seem any cleaner. Is there a better way to handle
> this?
