How to target a child of a sibling div using jquery - javascript

I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.
Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/
HTML:
<div id="container">
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 1
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 1
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 2
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 2
</div>
</div>
</div>
</div>
JQuery:
$('.item .item-image').bind({
mouseenter: function() {
$(this).siblings('.item-body').children('body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('body-inner').hide();
console.log('Left');
}
});
I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/

body-inner needs to have a . to indicate a class selector:
$(this).siblings('.item-body').children('.body-inner').hide();
Additionally, as of jQuery 1.7 the .on method is preferred to .bind:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle

Alternatively, you could use hover and toggle():
DEMO jsFiddle
$('.item .item-image').hover(function(){
$(this).siblings('.item-body').children('.body-inner').toggle();
});
PS: you should remove class hidden on second .item-body as in jsFiddle
Or using only CSS:
DEMO jsFiddle
.item-image:hover ~ .item-body > .body-inner {
display: block;
}

Your code works fine. You're just missing . to target class body-inner
$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here
Also, you should use .on() instead of .bind(), final code look like:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.
If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:
$('.item-body:eq(1)').removeClass('hidden');
Updated Fiddle

You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()
$('.item').on({
mouseenter: function () {
$(this).find('.item-body .body-inner').show();
},
mouseleave: function () {
$(this).find('.item-body .body-inner').hide();
}
});
Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/

Related

Jquery Slidedown First

I'm working with someone else html else I would of approached this differenty, but I'm trying to create a simple accordion from it.
The problem is it only slides show the first lot of div, it should find its parent div and slide show.
JS
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:first').slideToggle( "slow", function() {});
});
HTML
<h3 class="jqueryheading" style="cursor:pointer">Heading One</h3>
<div style="display:none;">
<p><img src="one.jpg"/></p>
<p><img src="two.jpg"/></p>
</div>
<h3 class="jqueryheading" style="cursor:pointer">Heading Two</h3>
<div style="display:none;">
<p><img src="three.jpg"/></p>
<p><img src="four.jpg"/></p>
</div>
Any ideas why this is happening?
Targeting the parent, then all DIV's gets you all the DIV's as they are children of the same parent, just target the next() DIV instead
$('h3.jqueryheading').click(function () {
$(this).next('div').slideToggle("slow");
});
FIDDLE
You can use next to target the next element
$('h3.jqueryheading').click(function() {
$(this).next().slideToggle( "slow", function() {});
});
Or the next div tag, if you want to be specific
$('h3.jqueryheading').click(function() {
$(this).next('div').slideToggle( "slow", function() {});
});
FIDDLE
Only one issue you have to use the :first-child or :eq(0)
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:eq(0)').slideToggle( "slow", function() {});
});

show image on hover just for the actual hovered element

I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!
function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.
$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});
Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});

JQuery does not hide div if p element is before it?

I am trying to make use of a JQuery snippet to hide some content on SharePoint. It works without the <p> element, but SharePoint has a lot of stuff in between the div so I think that's why it's not working.
JQuery:
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).next("div.ms-wpcontentdivspace").slideToggle(200);
});
});
Here's the working code:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span> </h2></div>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's the code that doesn't:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span></h2></div>
<p>some text</p>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's a Jsfiddle. Thanks!
The jQuery version used 1.3.x is pretty old, anyway try
jQuery(document).ready(function () {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function (e) {
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});
Demo: Fiddle
$.next() only gets the immediately following sibling, so you will want to use $.nextAll()
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

mouseenter not working correctly

I'm trying to display a class using mousenter like so:
$(".stcommenttext").live({
mouseenter:
function() {
$(this).attr('class');
},
mouseleave:
function() {
}
}
);
my HTML and CSS look like this:
<div class="stcommentbody" id='stcommentbody19'>
<div class="stcommentimg">
<img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/>
</div>
<div class="stcommenttext">
<input type="hidden" id="home19" value="1" />
<a class="stcommentdelete" href="#" id="cmt_19" rel="tooltip" title="Delete Comment"></a>
<b>psmith</b> hello <div class="stcommenttime">8 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div>
</div>
</div>
<div class="stcommentbody" id='stcommentbody20'>
<div class="stcommentimg">
<img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/>
</div>
<div class="stcommenttext">
<input type="hidden" id="home20" value="1" />
<a class="stcommentdelete" href="#" id="cmt_20" rel="tooltip" title="Delete Comment"></a>
<b>psmith</b> testing this <div class="stcommenttime">7 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div>
</div>
</div>
</div>
CSS:
.stcommentdelete {
float:right;
cursor:pointer;
background:url(/wall/icons/trashdull.png);
display: none;
height:20px;
width:20px;
}
.stbody:hover .stcommentdelete {
display: block;
}
.stcommentdelete:hover {
background:url(/wall/icons/trash.png);
}
I would expect it to show my delete icon upon mouseenter for the individual div but it's showing the icon for all divs. Any idea what I'm missing?
$(".stcommenttext").on({
mouseenter:
function() {
$(this).addClass('stcommentdelete');
},
mouseleave:
function() {
$(this).removeClass('stcommentdelete');
}
});
You want to show the .stcommentdelete element when you hover the .stcommentbody elements?
$('.stcommentbody').hover(function() {
$(this).find('.stcommentdelete').show();
}, function() {
$(this).find('.stcommentdelete').hide();
});
As of jQuery 1.7, the .live() method is deprecated. see live
you can use .on() instead of .live() or use .mouseover and .mouseleave separately like this.
$(".stcommenttext").mouseenter(function(){
$(this).addClass('class');
}).mouseleave(function(){
$(this).removeClass('class');
});
see mouseenter
You can use .hover with multiple functions for mouseenter and mouseleave events, like this:
$(".stcommentbody").hover(
function() {
$(this).find(".stcommentdelete").addClass('stcommentdelete-active');
}, function() {
$(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
}
);​
Demo: http://jsfiddle.net/SO_AMK/Vg2vZ/ (I used your exact markup with different images)

Categories

Resources