JS Target a class directly above element - javascript

i'm trying to use jQuery to add/remove a class to an element but I only want to target the '.content' class that is directly above the '.trigger' essentially making each work independently of each other.
Any ideas on the best way to do this?
Thanks in advance
HTML
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
CSS
<style type="text/css">
.showHide{
display: none;
}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$('span.content').toggleClass('showHide');
});
});
</script>

Try using .prev() that will only target the .content element which is a immediately preceding sibling of your .trigger element:
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).prev('span.content').toggleClass('showHide');
});
});

You could also use siblings(). It will only target everything in the same container
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).siblings('span.content').toggleClass('showHide');
});
});
Fiddle
This method will allow the .content to be anywhere in the container, whether it is before or after the .trigger

Related

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>

Jquery hover on div, add styles on grandparent

I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com

Showing a div on button click

I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}
You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.

accessing an element of a class in jquery not working

I want to access different id's (with same name) using $this in jquery, but its not working.
I want when a superhero is clicked only his friend and he himself change their class only.
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('.shikhar').click(function(){
$(this).find('#a').click(function(){
$(this).find('#b').addClass("selected");
$(this).find('#a').addClass("highlight");
});
$(this).find('#b').click(function(){
$(this).find('#a').addClass("selected");
$(this).find('#b').addClass("highlight");
});
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="shikhar">
<div id="a">Spiderman</div>
<div id="b">Hulk</div>
</div>
<div class="shikhar">
<div id="a">Superman</div>
<div id="b">Batman</div>
</div>
</body>
</html>
ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:
<div class="a">Spiderman</div>
...
<div class="a">Superman</div>
Then change your jQuery selectors to $('.a') and $('.b') instead:
$(this).find('.a').click(function(){
$(this).find('.b').addClass("selected");
$(this).find('.a').addClass("highlight");
});
You have duplicate ids. IDs should be unique. You can use the markup:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
And JS:
$('.shikhar').click(function(){
$(this).find('.a').click(function(){
$(this).next().addClass("selected");
$(this).addClass("highlight");
});
$(this).find('.b').click(function(){
$(this).prev().addClass("selected");
$(this).addClass("highlight");
});
});
you cant use the same ID for different elements. use ID for only one element.
HTML:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
jQuery:
$('.shikhar').each(function(){
$(this).on('click','.a, .b',function(){
$(this).closest('.shikhar').children().removeClass('selected highlight');
$(this).addClass('selected');
$(this).siblings().addClass('highlight');
});
});
Fiddle:
http://jsfiddle.net/me2DE/
Try this:
$(document).ready(function() {
$('.shikhar >').click(function(){
$(this).addClass("highlight");
$(this).siblings('div').addClass("selected");
});
});
Here is your answer: http://jsfiddle.net/S5rbz/ But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).

Traversing DOM from span in / out of divs

I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.
As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}
Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});​
This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>

Categories

Resources