I have next html setup:
<div class="one">
<div class="two">
Click
</div>
</div>
And I want to change background color for element with class .one when I click on element .three with jQuery.
This is what I was trying to use:
$(function(){
$('.three')(function(){
$(this).parent().parent().css('backgroundColor', 'red');
})
});
Here is a fiddle example: https://jsfiddle.net/Munja/a7unbs2p/
I was searching for solution here on SO but wasn't able to find it fast enough (probably I didn't look good enough :/).
Thank you.
you need to use .click() or .on('click') .. and you can use .closest() as well instead of using parent() twice
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})
});
Just add Click event at your code. First add jquery.min.js then add the script. You can do like this -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".three").click(function(){
$(this).parent().parent().css("background","red");
});
</script>
Since it's a descedant of the element, you can use .parents() which travels up until the selector is found.
Additionally, You can use the CSS syntax inside of the CSS method (background-color instead of backgroundColor).
$('.three').on('click', function(){
$(this).parents('.one').css('background-color', 'red');
})
I can't comment, so, little addition to higher answer:
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('background-color', 'red');
})
});
Css doesn't have property with name backgroundColor
You can use something like this.
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})
Related
Is there a general way to specify elements in jQuery. For example using the $(this).find or next function.
I am trying to create a button that when copied will only activate one at a time.
At the moment when the button is duplicated output is copied.
See example.
http://jsfiddle.net/X8AYd/12/
button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p>
$(".vote-number").hide();
$(".vote-btn").click(function () {
$(".vote-number").finish().show().fadeOut(5000);
});
$(".vote-number").finish() will target all the elements with the class vote-number. Instead, you want to target only the element next to the button. So, use $(this).next(".vote-number") to target specifically.
JSFIDDLE DEMO
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
You can do with .next() as using .vote-btn will only target the first occurrance of the same, so better use $(this).next(".vote-number') which targets to the next <p> with class vote-number
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
Fiddle Example
Try This:
$(".vote-btn").click(function(){
$(this).next('.vote-number').finish().show().fadeOut(5000);
});
Working Fiddle
$(".vote-number").hide();
$(document).on("click", ".vote-btn", function (e) {
$(this).prev(".vote-number").show().fadeOut(5000);
});
Working Fiddle
I am working on a very dynamic page which will have a lot of what we will call buttons for simplicity sake (actually are divs).
These buttons have a span tag inside which has display:none;. This all of these "buttons" have the Span inside with the css class which has them hidden. I can not create an #ID for each one, they are going to be dynamic
How can I, using Jquery, animate using .show() just the item being clicked. I can not input an ID, because it will be created dynamically with php.
$('.button').click(function(){
$(this).find('span').show();
})
jsfiddle
Try this
$("div").click(function(){
$(this).children("span").show();
});
DEMO
More information here
$(".className or #idName").css("thecssselector", "thevalue");
See Here
use this jQuery:
$(document).ready(function(){
$("tag name or id on which you will click").click(function(){
$("tagname on which you want to apply the css").css("property_name","property_value");
});
});
Here have some fiddle.
$('div').click(function(){
$(this).find('span').fadeIn("slow");
});
try this
$(".button").click(function(){
$("div span").hide();
$(this).find("span").show();
});
I have a #myDiv And i want, when page load, ad class to #myDiv
E.G. Page load, #myDiv.class
I use this code but it's not working:
$('#sky').addClass(‘animate-in’);
$(document).ready(function(){ is called whn the doucument is ready.
and your addClass .. use single or double quotes to enclose the class ( not ‘ )..
try this...
$(document).ready(function(){
$('#sky').addClass('animate-in');
});
UPDATED
another div
<div id="anotherdiv"></div>
call the click function and the jquery selector to which u want to change the class
$('#anotherdiv').click(function(){
$('#sky').addClass('animate-in'); //or any other new class
});
go thorugh the selector jquery documentation..
http://api.jquery.com/category/selectors/
You need to use single or double quote to enclose your class.
Change
$('#sky').addClass(‘animate-in’);
To
$('#sky').addClass('animate-in');
or
$('#sky').addClass("animate-in");
you can do it like this
$(function () {
$('#sky').addClass('animate-in');
});
OR
$(function () {
$('#sky').addClass("animate-in");
});
use this code
<body onload='$("sky").addClass("animate-in")' >
Please check that already any classes are available in $("#sky") and if u want to use only 'animate-in',
Can try this,
$("#sky").attr('class','');
$("#sky").addClass('animate-in');
so that we can come to know that, already existing things are cleared and adding a new one
I have a click event and I want to add a class to the current element clicked plus an other element and I want to do that in one line.
I have tried something like
JS file
$('div').click(function(){
$(this, 'span').css('background','yellow');
// could usethe following way but it's not DRY
// $(this).css('background','yellow');
// $('span').css('background','yellow');
});
HTML file
<div>
div
</div>
<span>
span
</span>
Here is a fiddle for exemple
But it doesn't works so how can I do without repeating the css method.
You can use .add(selector) method like so:
$(this).add('span').css('background','yellow');
You can add the <span> elements to the $(this) jQuery instance:
$(this).add( $('span') ).css('background', 'yellow');
or even:
$(this).add('span').css('background', 'yellow');
http://jsfiddle.net/Hhqc8/7/
Try siblings():
$('div').click(function(){
$(this).siblings('span').css('background','yellow');
})
Example:
http://jsfiddle.net/Hhqc8/6/
I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?
Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!
Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();
You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();
first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});