CODEWITHSUNDEEP
jquery
Frank
Frank

Reputation: 569

jQuery select next <div> element

I have a simple div layout html, there is a function that when mouse over the div with className "personal-icon-email", I will call a JS function and display the hidden div with className "img-info-mask". 

<div class="user-panel">
<div class="user-panel-avatar"><img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=80"/></div>
<div class="user-panel-username">Frank</div>
<div class="user-panel-info">Hi there, May name is Frank ....</div> 
<div class="personal-icon-email pie-adj" onmouseover="showTips(this);" id="123321"></div>
<div class="personal-icon-hi pihi-adj"></div>
<div class="personal-icon-fav pifav-adj"></div>
<div class="img-info-mask">Contact Frank Now</div>

I was using jQuery with this and I have tried:

function showTips(object){$(object).next('.img-info-masks').show(); }

But failed. Also i have tried

function showTips(object){$('#123321').next('.img-info-masks').show();}

Still not works.

Can anyone tell me what's wrong and what i should do? Thank you a thousand :D

Upvotes: 3

Views: 5895

Answers (5)

Jignesh Rajput
Jignesh Rajput

Reputation: 3558

you can also use nextAll() instead of next() and than find your img-info-mask

want to show all the div.img-info-mask than try 

$(object).nextAll('div.img-info-mask').show();

or want to first div with contains .img-info-mask

$(object).nextAll('div.img-info-mask:first').show();

Upvotes: 4

Surreal Dreams
Surreal Dreams

Reputation: 26380

$("div.personal-icon-email").mouseover(function(){
     $("div.img-info-mask").show();
});

You need to select the item you want to monitor for the mouseover event and then add the event handler for mouseover. In that function, you show the hidden div. You can also show it, then hide it when the mouse leaves by using the hover() event handler like this:

$("div.personal-icon-email").hover(function(){
    //mouseover event
    $("div.img-info-mask").show();
},
function(){
    //mouseout event
    $("div.img-info-mask").hide();
});

Or you can make it even simpler:

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $("div.img-info-mask").toggle();
});

This calls the one function for both mouseover and mouseout, toggling the visibility each time.

So now you want to do this for just the next occurrence of the hidden info? Ok, that can be done too.

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $(this).parent().find('div.img-info-mask').toggle();
});

That will target the next sibiling div with the .img-info-mask class. You'll to make sure that each set of div's like the sample you gave is inside a parent div, or you'll be toggling all of the hidden divs at once.

Upvotes: 1

Chakradar Raju
Chakradar Raju

Reputation: 2811

jquery next: Gets the IMMEDIATELY following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

.img-info-masks is not immediately following the selected element.

Upvotes: 0

Andreas Wong
Andreas Wong

Reputation: 60506

next() only retrieves the immediate next sibling, it doesn't actually traverse all siblings.

http://api.jquery.com/next/

Get the immediately following sibling of each element in the set of 
matched elements. If a selector is provided, it retrieves the next 
sibling only if it matches that selector.

For one, if you wrap those divs in a parent div, you could do

$(this).parent().find('.img-info-mask').show()

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Do you mean:


$(".personal-icon-email").hover(function() {
  $(".img-info-mask").show();
},
function() {
  $(".img-info-mask").hide();
});

Upvotes: 0

Related Questions