Darklizard
Darklizard

Reputation: 377

Individual jquery actions for each div

Here is the original structure:

<div class="out">
 <div class="in">
 </div>
</div>
<div class="out">
 <div class="in">
 </div>
</div>
<div class="out">
 <div class="in">
 </div>
</div>

and I add jquery to toggle the "in" div.

$(document).ready(function() {
    $(".in").hide();
    $('.out').hover(function() {
        $(".in").slideToggle(100);
    });
});

see FIDDLE DEMO

However, it controls all the objects, and I don't know how to perform them individually.

Thanks!

Upvotes: 2

Views: 81

Answers (4)

Sushanth --
Sushanth --

Reputation: 55740

Use context selector

$(".in", this).slideToggle(100);

Code

$(document).ready(function() {
    $(".in").hide();
    $('.out').hover(function() {
        $(".in", this).slideToggle(100);
    });
});

Check Fiddle

Upvotes: 6

Precastic
Precastic

Reputation: 4001

Use this as the context selector in the call to jQuery, like this:

$(".in",this)

Full code:

$(document).ready(function() {
  $(".in").hide();
  $('.out').hover(function() {
    $(".in",this).slideToggle(100);
  });
});

Fiddle: http://jsfiddle.net/kfBDJ/5/

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

Try this

 $(document).ready(function() {
   $(".in").hide();
        $('.out').hover(function() {
            $(this).children(".in").slideToggle(100);
    });
});

updated jsFiddle File

Upvotes: 0

MrCode
MrCode

Reputation: 64526

Make the .in selector relative to this:

$(document).ready(function() {
   $(".in").hide();
   $('.out').hover(function() {
       $(this).find(".in").slideToggle(100);
   });
});

Corrected fiddle

Upvotes: 2

Related Questions