CODEWITHSUNDEEP
jquery
Flaashing
Flaashing

Reputation: 771

jQuery find children

hi i have a question about some jquery how do i select "First-First" of my html structure, when the mouse enter's main ? html structure:

<div id="main">
    <div class="first">
        <div class="first-first"></div>
        <div class="first-second"></div>
    </div>
</div>

would this be the prober way of doing it ?

  $("div.main").mouseenter(function() {
        $(this).child(".first").next(".first-first").show();
  }).mouseleave(function() {
        $(this).child(".first").next(".first-first").hide();
  });

Upvotes: 0

Views: 2450

Answers (7)

Sirkan
Sirkan

Reputation: 1

$(this).find('.first-first').show();

You should use find() function.

Upvotes: 0

Doug Owings
Doug Owings

Reputation: 4448

Perhaps

$("#main").mouseenter(function() {
    $('.first-first', this).show();
}).mouseleave(function() {
    $('.first-first', this).hide();
});

Upvotes: 1

Marnix
Marnix

Reputation: 6547

What about using a simple selector:

$("div.main").mouseenter(function() {
    $(".first > .first-first", this).show();
});

Upvotes: 1

Dan Williams
Dan Williams

Reputation: 4950

You can simplify that. And you should probally use mouseover not mouseenter

 $("div.main").mouseover(function() {
        $(".first-first").show();
  }).mouseleave(function() {
        $(".first-first").hide();
  });

Upvotes: 0

David Hor&#225;k
David Hor&#225;k

Reputation: 5565

$("div.main div:first div:first").show();

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

$('div#main').mouseenter(function() {
   $("div.first div.first-first", this).show();
}).mouseleave(function() {
     $("div.first div.first-first", this).hide();
});

this will do

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

You're close:

  $("div.main").mouseenter(function() {
        $(this).children(".first").children(".first-first").show();
  }).mouseleave(function() {
        $(this).children(".first").children(".first-first").hide();
  });

Or even faster:

  $("div.main").mouseenter(function() {
        $(this).find(".first-first").show();
  }).mouseleave(function() {
        $(this).find(".first-first").hide();
  });

Upvotes: 0

Related Questions