$(".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>
.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();
});
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
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();
});
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();
});
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
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
pass an event in function like
function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}
Related
I have this html structure:
<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>
now I would like to add a new div line <div href="#" class="ocond" id="text0">text0</div>
to the dropdown-content class. This should be done WITHIN a on-click-event ($("#table_cards").on( 'click', 'div.ocond', function (e) {...) of the class "ocond" (inside of the dropdown-content class).
I have tried those two options:
$(this).closest('.dropdown-content').prepend('<div ... >text0</div>');
and
$(this).parent('.dropdown-content').prepend('<div ... >text0</div>');
but both do not work.I can not find the correct selector for making this happen when clicking on the "ocond" class.
Thank you for any help in advance!
.parent() doesn't accept selectors because it simply goes up one level.
.parents() does because it keeps going up through the parents, grandparents, etc and will only affect those elements that match the selector.
.closest() accepts a selector just like .parents() but will stop after finding the first parent to meet the selector.
You can use .parent().prepend(), or .closest(".dropdown-content").prepend()
$(".dropbtn").click( function() {
$(this).nextAll(".dropdown-content").first().show();
});
$(".dropdownedit").mouseleave( function() {
$(this).find(".dropdown-content").hide();
});
$(".ocond").click( function() {
$(this).closest('.dropdown-content').prepend("<div href='#' class='ocond' id='text0'>text0</div>");
$(this).closest('.dropdown-content').hide();
});
.dropdown-content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div>
</div>
I'm struggling to select my img Element in a list so i can switch its class on and off.
I've tried different way to select it but its the first picture of my list that lights up, even when mouseover on the second/third/... div of the list.
<ul>
<li>
<div class="container" onmouseover="toggleImgColor()" onmouseout="toggleImgColor()">
<div class="container-title">
<h3 class="title />
<img id="pic" class="greyImg" />
</div>
...
</div>
</li>
...
</ul>
Javascript
function toggleImgColor() {
$(this).find("img").toggleClass("greyImg");
}
You can do that something like this:
$(document).ready(function(){
$(".container").hover(function() {
$("#pic").toggleClass("greyImg");
});
});
Just pass this inside the toggleImgColor() in html like toggleImgColor(this), and catch that as parameter in javascript function. This will pass current hovered DOM object to toggleImgColor function and you can then use that to show that specific div.
HTML:
<ul>
<li>
<div class="container" onmouseover="toggleImgColor(this)" onmouseout="toggleImgColor(this)">
<div class="container-title">
<h3 class="title />
<img class="greyImg" />
</div>
...
</div>
</li>
...
</ul>
JavaScript:
function toggleImgColor(item) {
$(item).find("img").toggleClass("greyImg");
}
$('.quick-links').each(function() {
$(this).hover(function() {
$('.img-thumbnail').toggleClass('quick-links-hover');
});
});
So, this works however there is multiple of the .img-thumbnails on the page and I only want it to affect the corresponding one. HTML:
<a href="http://localhost:8888/home/the-last-rays-of-sunlight/" class="thumbnail img-thumbnail" data-slb-group="203_auto_1" data-slb-active="1" data-slb-internal="40">
<img width="296" height="300" src="http://localhost:8888/wp-content/uploads/2014/01/The-Last-Rays-of-Sunlight-296x300.jpg" class="attachment-medium" alt="sold" />
</a>
<div class="pic-options">
<div class="quick-links pull-left">
<span class="icon-star-empty" data-toggle="tooltip" data-placement="top" title="Favourite this painting"></span>
<span class="icon-slideshare"></span>
</div>
<div class="pull-right">
<span class="quick-enquire">
Enquire about this painting</span>
<span id="isSold">sold</span>
</div>
</div>
Thanks for your help!
You're probably looking for something like this
$('.quick-links').hover(function() {
$(this).closest('.pic-options').prev('.img-thumbnail').toggleClass('quick-links-hover');
});
Targets the parent .pic-options, then the previous .thumbnail
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?
I'm trying to add a class called "animated" to a child div only when the parent li has a class called "current". Additionally, I'm trying to remove the "animated" class if the parent li does not show the "current" class.
$(document).ready(function() {
if ($('ul.itemwrap li').hasClass('current')) {
$( "ul.itemwrap li" ).find( ".caption-text" ).addClass("animated");
}
else {
$( "ul.itemwrap li" ).find( ".caption-text" ).removeClass( "animated" );
}
});
problem*
the code works, somewhat, however, it's only adding the class to all child (.caption-text) elements as well as not removing them when the "current" class is added and removed throughout the carousel loop.
Html*
<ul class="itemwrap">
<li class="current"> <img src="images/img1.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img2.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>Title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img3.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder ">
<div class="container">
<div class="caption-text">
<h1>Title></h1>
</div>
</div>
</div>
</div>
</li>
</ul>
An issue with your code is that if one <li> has the class 'current', then you're adding the class animated to all ".caption-text" elements, not just the ones below the item with '.current'.
You could fix your code in a couple ways. This way processes each <li> individually:
$(document).ready(function() {
$('ul.itemwrap li').each(function() {
var item = $(this);
var caption = item.find(".caption-text");
if (item.hasClass('current')) {
caption.addClass("animated");
} else {
caption.removeClass("animated");
}
});
});
This way uses selectors to do more of the work for you:
$(document).ready(function() {
// clear .animated from all captions
$('ul.itemwrap li .caption-text').removeClass("animated");
// put back the .animated under .current
$('ul.itemwrap li.current .caption-text').addClass("animated");
});