Need to target item only inside div - javascript

Right now I have .clrChart hidden and want to unhide with click on .color but have multiple of these in a row so I need to target the one under the click.
<div class="color">
<a><img src="img/clrBttn.png" alt="" /></a>
<img src="img/clrChart2.jpg" alt="color chart" class="clrChart" />
</div>
I have tried this w/ no avail.
$('.color').click(function() {
$(this).next('.clrChart').show();
});
any help would be greatly appreciated:)

Use .find() instead of .next()

$('.color').click(function() {
$(this).find('.clrChart').show();
});
This will find a descendant inside the current .color

Related

How to know which element is clicked and toggle class to it? JS Jquery

I have 4 divs like this, with class work:
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
And I want to toggle clicked class to clicked div:
.clicked {
font-size: 25px;
}
How to do it?
$('.work').on('click', function() {
$(this).toggleClass('clicked');
})
Geez, why couldn't you just go check the documentation!
There is a function in jquery named toggleClass.
You should attach a click event to your div and then use this to reference to the clicked element.
$('.work').click(function() { // edited: from $(.work) to $('.work')
$(this).toggleClass("click")
})
Here you go with a solution https://jsfiddle.net/7ep3e4gn/
$('div.work').click(function(){
$(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});
.clicked {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda2</h3>
<p>Panda2 eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda3</h3>
<p>Panda3 eats apple.</p>
</div>
I've used addClass & removeClass along with jQuery siblings method.
Hope this will help you.
Jquery has a method just for that.
$('.work').click(function(e) {
$(e.target).closest('.work').toggleClass('clicked');
});
The .closest() is in case the click was registered on the contained image, etc.
If you want only one of the div's with the class .work to have the .clicked class at a time, here's what you do:
$('.work').on('click', function() { //When the div 'work' is clicked
$('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'
$(this).addClass('clicked'); //Add the class 'clicked' to the div that was clicked.
});
Here's a fiddle for the same.

image popup in javascript

i need to give popup for all the images displayed under a div
i tried to add div before and after image tag but its not appending properly
this is my following code
<div class="description">
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0"></div>
Expected output
<div class="description">
<div class="fancybox"> //class to be added
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>
You can use some JQuery for this, but you have to change the html code a bit.
See snippet
$('.imagepopup0').click(function() {
$('.outer').toggle('show');
$('.fancybox').toggle('show');
});
/* Not needed, just for show */
.fancybox {
background-color: blue;
}
.description {
background-color: red;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
<div class="fancybox" style="display: none;">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
</div>
</div>
JSFiddle
Original answer: jquery, wrap elements inside a div
Could use the .wrapAll() method:
$('#imagepopup0').wrapAll('<div class="fancybox"></div>');
The wrapAll() method will wrap all the elements matched into another element whereas the .wrap() method which wraps the matched elements individually.
Thank you for your suggestion friends i have found a simple solution for that instead of using div i user a tag and fancy box in it
the following code working fine for me
$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');
<script type="text/javascript">
// FANCYBOX JS
$(document).ready(function(){
$(".fancybox").fancybox({
// openEffect: "none",
// closeEffect: "none"
});
});
</script>

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 - How to insert element after parent element?

I try to find if an element is on the page. If the element is on the page then find its parent element and insert it after that parent element.
JQuery:
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).parent().find('h2'));
$(this).css('float','left');
});
}
HTML:
<h2 class="underline">
<div class="catIcon" style="padding-right: 10px;"><!-- element to move -->
<img class="catIcon" alt="Projects" src="http://www.example.com/storage/images/category/on-site-support56x56.jpg" style="float: left;">
</div>
Projekty
</h2>
<!-- here before text and after h2 tag with class underline -->.text
<a class="link2 ui-link" target="_blank" href="http://www.example.com/cz/cs/22.html">>> info</a>
The h2 is the parent's parent element, so you need to use .closest('h2'), not .parent().find('h2') - it looks for a h2 element inside the image's parent(div)
jQuery(function(){
$('.underline .catIcon').each(function () {
$(this).insertAfter($(this).closest('h2'));
$(this).css('float', 'left');
});
});
Demo: Fiddle
use closest()
you need to go parent .underline then don't find in this
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).closest(".underline"));
$(this).css('float','left');
});
}

Select the parent div only if it has id attribute

I am trying to find the first parent div that has id attribute.
The selectors is 'div .img' and it could be inside any nested div
<div id='div1'>
<div id='div2'> first nested parent div
<div>second div
<img class='img' src='test.jpg'/>
</div>
</div>
<div> //this div has no id
<div>another div
<img class='img' src='cookie.jpg'/>
</div>
<div>
</div>
The selector
$('div.img')
should output
div2
div1
div2 shows first becasue div2 has id attribute and it is the parent of the test.img
div1 shows next becasue cookie is the second image and the first parent div that has div1 id
I have tried
if($('div .img').find('.img').closest('div').attr('id')){
console.log($('div.img').closest('div').attr('id'))
}
but it doesn't work. Are there anyways to do this? Thanks so much!
I'd suggest:
var divsWithIDs = $('img.img').parents('div[id]').get();
console.log(divsWithIDs);
JS Fiddle demo.
This approach looks for the img.img element, then looks through the parents of those images to find those div elements that have an id attribute. The get() method converts the selection to an array.
References:
get().
parents().
var IamadivparentandhaveanId=$('div').find('img').closest('div[id]');
OR using the class:
$('div').find('img.img').closest('div[id]');
or
$('.img').closest('div[id]');
EDIT per comment to clarify use to ONLY find them once:
$('img.img').each(function(){
$(this).closest('div[id]');
});// or use .filter if that is perferred
You can use:
var $divsWithIds = $('img.img').closest('div[id]');
This is the same as the answer by #David Thomas, except using closest instead of parents. It selects all "img" elements with the ".img" class, and then gets the closest parent for each one.
In the following situation, using parents() will include both "div1" and "div2", whereas using closest() will return only 'div2':
<div id='div1'>
<div id='div2'>
<div>
<img id="img1" class='img' src='test.jpg'/>
</div>
</div>
</div>
<div>
<img id="img2" class='img' src='cookie.jpg'/>
<div>
You can use jQuery each to iterate over the parents.
$('div img').each(function (a, b) {
var x = $(b).parent();
while (x && !x.attr('id')) {
x = x.parent();
}
console.log(x.attr('id'));
});

Categories

Resources