Comments on: How to Get Anything You Want - part 2

By: Paul

Paul — Tue, 22 Apr 2008 16:54:30 +0000

Please don’t tell my friends I’m an idiot

If they are true friends they will already know

By: Sean

Sean — Sat, 19 Apr 2008 03:49:13 +0000

Please don’t tell my friends I’m an idiot:

$(".outerDiv").hover(
	function(){ $(this).find(".innerDiv").show(); },
	function(){ $(this).find(".innerDiv").hide(); }
);

By: Sean

Sean — Sat, 19 Apr 2008 03:43:17 +0000

Oops ... errant comma. Fix below:

$(".outerDiv").hover(
  $(this).find('.innerDiv').show(),
  $(this).find('.innerDiv').hide()
);

By: Sean

Sean — Sat, 19 Apr 2008 03:37:57 +0000

Thanks a ton for the tutorial! I was able to solve a problem with a selector that was below the hovered item like:

$(".outerDiv").hover(
  $(this).find('.innerDiv').show(),
  $(this).find('.innerDiv').hide(),
);

This worked incredibly easily to show a div when you hovered. Basically, it shows an edit link when you hover, and hides it when you lose hover.

Thanks again for a great site!

By: Karl

Karl — Sun, 16 Mar 2008 23:04:21 +0000

Hi Andy,

Well, if the class is “active”, then you’ll need to have …:has(.active), but other than that, it looks fine. You probably don’t need the first ul, unless you have to distinguish it from an ol. So, all together, it might look like this:
$('#left li ul:has(.active)')

By: Andy

Andy — Sun, 16 Mar 2008 22:19:00 +0000

For previous post:


$('#left ul li ul:has(.active_page)')

Is this correct?

By: Andy

Andy — Sun, 16 Mar 2008 22:10:15 +0000

This is great article, thanks, Karl! I`m newbie in JQuery and ask you to help. I have this code:

 
#left
  ul
    li
      ul ----------- how to get it?
        ...
          a class="active"
        ...
      ul
      ul

The question: how to get #left ul li ul which have inside<a class="active">. The problem (for me): tag a is on unknown level inside ul

By: frances

frances — Fri, 25 Jan 2008 15:55:18 +0000

Awesome! It’s so simple and yet I was tying myself in knots trying to figure it out. I think I still have to get the hang of jQuery’s chaining… Thanks so much for the help and a great example to learn from!

By: Karl

Karl — Fri, 25 Jan 2008 03:39:00 +0000

Hi Frances, I think I know what you're getting at. I think the secret is to make use of the this keyword. Something like this:

$('td').hover(function() {
  $('td.' + this.className).addClass('on');
}, function() {
  $('td').removeClass('on');
});

By: frances

frances — Thu, 24 Jan 2008 22:53:48 +0000

Thanks for a great site, Karl! I'm just getting into jQuery and I couldn't do it without your tutorials. I think I have the same question as willi above. I'm trying to highlight each column in a table when someone hovers over one of the elements. I've added classes to each of the related ths and tds, and I can get it to work but only if I define the class absolutely, like this:


var $classWord = "dayTue";

var $currentClass = "." + $classWord;

var $selectClass = $("table#eventsWeek").find($currentClass);

$($selectClass).hover(
 	function(){ 
 		$($selectClass).addClass("on");
 	}, 
	function(){ 
		$($selectClass).removeClass("on");
	}	 
 );

(The highlight is done with the css class "on".) What I need is for it to change as the mouse moves... I can't figure out how to create a variable to hold the class of the element being hovered over, which would then be used to select the other elements with the same class, which I think would be something like this:


var $classWord = ($(this).mouseover(
	function() {
		$(this).attr("class");	
	}
));

var $currentClass = "." + $classWord;


var $selectClass = $("table#eventsWeek").find($currentClass);

$($selectClass).hover(
 	function(){ 
 		$($selectClass).addClass("on");
 	}, 
	function(){ 
		$($selectClass).removeClass("on");
	}	 
 );

I guess that's the heart of my question: How can you select an attribute of the current element being clicked or hovered over? thanks for the help and keep up the great work! -frances