How to use jQuery to display only child div elements?

Question

So, I have this jquery function, which should show the hidden range of the class on hover. How to configure a function so that it displays only the selected child range of div (instead of displaying all the intervals on the page)?

Here is my jquery function:

$(".thumb").hover( function() { $(".blurb").show(); }, function(){ $(".blurb").hide(); } ); 

You can view jsfidde here . Thanks!

Answer 1

What this for!

 $(".thumb").hover( function() { $(this).children('.blurb').show(); }, function(){ $(this).children('.blurb').hide(); } ); 

Answer 2

Use $(this).children() instead of $(this).children() global query:

 $(".thumb").hover(function() { $(this).children().show(); }, function() { $(this).children().hide(); }); 

Working demo: http://jsfiddle.net/h5x3f/2/

Note: if you are not concerned about Internet Explorer 6 support, you can completely eliminate jQuery / JavaScript and use the CSS :hover pseudo-class, which will even work with JS disabled. Or you can use a gasket like ie-7.js to handle :hover for you. See this version of your violin for an example.

Answer 3

Select the div first and then its children, for example

 $("#mydiv").children(".blurb").show(); 

Answer 4

here you have another solution using the find function:

  $(".thumb").hover( function() { $(this).find(".blurb").show(); }, function() { $(this).find(".blurb").hide(); } );