CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashish
Ashish

Reputation: 429

using $(this) properly in jquery

    $(".gear_listing").hover(function(){

            $(".overlay_gears").show();
        },function(){
   $(".overlay_gears").hide();
}
    );

above is my jquery code,as u can imagine i am trying to show .overlay_gears div when .gear_listing div is hover,the above code works just fine.the problem is i have many number of .gear_listing divs and many number of .overlay_gears div,when i hover on any div called .gear_listing all the .overlay_gears div is shown which i dont want.i just want to show the .overlay_gears div under that .gear_listing div.i know i have to make use of $(this).i just don't know how.

i tried doing this:

    $(".gear_listing").hover(function(){
        var this=$(this);
            this.$(".overlay_gears").show();
        },function(){
   this.$(".overlay_gears").hide();
}
    );

its not working

below is my div structure:

               <li>
                    <a href="#">
                        <div class="gear_listing relative">

                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>

                            <img src="images/list_one.jpg">
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_two.jpg">
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="gear_listing relative">
                            <div class="overlay_gears absolute"></div>
                            <div class="gear_description absolute">
                                <span>afdfdsfds sfd</span>
                            </div>
                            <img src="images/list_three.jpg">
                        </div>
                    </a>
                </li>

Upvotes: 2

Views: 140

Answers (7)

Sudharsan S
Sudharsan S

Reputation: 15393

Use .find() and .slideToggle() for animation effects or use .fadeToggle()

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().slideToggle();
});

or

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").stop().fadeToggle();
});

Fiddle

Upvotes: 5

Rayon
Rayon

Reputation: 36609

Use this as the second-argument in selector which is context

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

Internally, selector context is implemented with the .find() method, so $( "SELECTOR", this ) is equivalent to $(this).find("SELECTOR")

$(".gear_listing").hover(function() {
  $(".overlay_gears", this).show();
}, function() {
  $(".overlay_gears", this).hide();
});

Upvotes: 2

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

.overlay_gears is children of .gear_listing so use like this

$(".gear_listing").hover(function(){
    $(this).children(".overlay_gears").fadeIn();
},function(){
    $(this).children(".overlay_gears").fadeOut();
});

Upvotes: 5

Suraj
Suraj

Reputation: 168

pass an event in function like

function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}

Upvotes: 0

parth718
parth718

Reputation: 23

you can use 

$(".gear_listing").hover(function(){ 
$(this).children('.overlay_gears').show();
}

here we select all elements inside $(this) with required class http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

Upvotes: 0

hmd
hmd

Reputation: 970

Basically, you first needs to hide all .overlay_gears on hover and just needs to show the particular .overlay_gears that is the child of current hovered parent. And then in 'unhover' event you can simply hide all .overlay_gears divs..

HTML:

<ul>
<li>
    <a href="#">
        <div class="gear_listing relative">

            <div class="overlay_gears absolute"> overlay_gears data1 overlay_gears data1</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>

        </div>
    </a>
</li>

<li>
    <a href="#">
        <div class="gear_listing relative">
            <div class="overlay_gears absolute"> overlay_gears data2 overlay_gears data2</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>

        </div>
    </a>
</li>

<li>
    <a href="#">
        <div class="gear_listing relative">
            <div class="overlay_gears absolute"> overlay_gears data3 overlay_gears data3 overlay_gears data3</div>
            <div class="gear_description absolute">
                <span>afdfdsfds sfd</span>
            </div>

        </div>
    </a>
</li>
</ul>

JQuery:

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

Working Fiddle: http://jsfiddle.net/kfopaj7e/

I have just removed <img> tag for testing purpose and added few css in Fiddle for the visual thingy

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Since overlay_gears is a child element of gear_listing,you can use .find() method

$(".gear_listing").hover(function() {
  $(this).find(".overlay_gears").show();
}, function() {
  $(this).find(".overlay_gears").hide();
});

Upvotes: 1

Related Questions