So, I have this if statement and I want to add a class to an element I've added it in my if statement but it doesn't add the class.
$(".project").click(function(){
if ($(".project-expand",this).is(':visible')) {
$(".project-expand",this).hide();
} else if ($(".project-expand",this).is(':hidden')) {
$(".project-expand",this).show();
$(".project",this).addClass('item-dropped');
}
});
This line seems wrong to me
$(".project",this).addClass('item-dropped');
You are passing this which already should be the .project element you clicked as a context for your selector. Unless you have a nested .project I don't think jQuery will be able to find the element you are looking for
Replace that line with $(this).addClass('item-dropped');
Related
I try to add class to div when "active-card" class appears on it. Tried different solutions, can't make that stuff work. Any ideas?
jQuery(document).ready(function($){
if ($(".card").hasClass("active-card")) {
$(".card").addClass("card-opacity");
}
});
First I will assume some things in my answer.
1 – there are multiple .card elements on your page
2 – you only want to add the class ‘card-opacity’ to a single element on dom
That being said you need to go through every card element and check if that specific element has the active-card class. In this case I used the map() function to iterate each element, but you can use your favorite loop function to iterate through an array.
// First get all '.card' elements and iterate through them
$('.card').map((card, index) => {
// check if the card element has the class 'active-card'
if($(card).hasClass('active-card')) {
// if true add the class 'card-opacity' to that element
$(card).addClass('card-opacity');
}
})
as #ikik commented try to explain your question and give as much information as possible, so it’s easier for everyone to help
I am adding classes namely hide_some_features,show_some_features in each loop. Now i want to add class to feature_suffix having next only hide_some_features class. I tried with $(this).closest('.feature_suffix').addClass('test-class'); which is not working.
$('.variations_form input:radio[name=attribute_pa_1]').each(function() {
if (jQuery.inArray($(this).attr('data-feature-value'), disabledFetaureValue) < 0) {
$(this).closest('.cc-selector').addClass('hide_some_features');
$(this).closest('.feature_suffix').addClass('test-class');
} else {
$(this).closest('.cc-selector').addClass('show_some_features');
}
})
;
I want to add class to highlighted place
.closest() wont work here because the target element is not an ancestor of the element that fires the event. Use the below:
$(this).closest('.cc-selector').prev('.feature_suffix').addClass('test-class');
You can find the closest cc-selector, then see whether it has hide_some_features, if so then add the new class to its previous sibling
$(this).closest('.cc-selector').filter('.hide_some_features').prev('.feature_suffix').addClass('test-class');
I want to add class on siblings of target Element in javascript. I have done this before using jquery which is pretty easy. But In my current organization they do not use jquery and I need to done with javascript and that is very difficult for me.
I have write some code that will attached a click function to an matched element but afterward I am not getting any login to how to make it happend. fiddle
var elements= document.getElementsByTagName('*'),i;
i=0;
while(elements[i]){
if(elements[i].className=='c'){
elements[i].addEventListener('click',function(){
this.jsSiblings().jsAddClass('newClass')
})
}
i++
}
Array.prototype.jsSiblings= function(){
//code
}
Array.prototype.jsAddClass=function(){
//code
}
You can use the base function in JS to add a class, element.classList.add("anotherclass"); (from MDN) and here you will find out about siblings without jQuery : How to find all Siblings of currently selected object
I'm working with the German book (mediated title) "jQuery the practice book".
In one of the first tutorials the given JS code is like this:
$(document).ready(function()
{
$("#box p").click
(
function()
{
$("#box p").removeClass("green");
$(this)
.addClass("green")
.parent()
.removeClass()
.addClass("boxColor-" + $("#box p").index(this));
}
);
});
the CSS is like this:
<style type ="text/css">
p {
cursor:pointer;
}
.green{
color:#009933;
background-color:#E2FFEC;
cursor:default;
}
</style>
and the HTML is this:
<body>
<div id="box">
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
<p>Dritter Absatz</p>
</div>
</body>
What makes me stuck is this line of the jQuery script:
.addClass("boxColor-" + $("#box p").index(this));
The Tutorial of the book explains this with a reason like "On which way else we could get the p box related Class?"
But I don't get the point what is happening in that line?
And even if I remove this line, the result I'm seeing keeps being the same.
so, what does happen here? and is it really necessary in any way?
That line is adding a boxColor-N class to the #box element, where N is the index of the <p> you just clicked.
Since there is nothing in the CSS that targets such a class and also no script code that works with it, there are no observable effects.
This line adds a class name. The value that is added is a concatenation of the string boxColor- and the index of the relevant paragraph element.
The index of the element is extracted by using the jQuery index() function.
Regarding your question if it is needed at all really depends on what that class name does. All it's really doing here is adding a class name. If that class name has any other uses such as changing CSS properties then yes, it is needed. In your example, there is no CSS rule for that value - so nothing really changes or happens.
To see this actual doing something, you can add a CSS rule like this:
boxColor-0 {
background:red;
}
boxColor-1 {
background:green;
}
boxColor-2 {
background:blue;
}
With these rules, when you click on a <p> element, it's background color will change.
I don't know if it was an error but as the other explained this will add a class something like "boxColor-" + the index of the element.
But the code
$("#box p").removeClass("green");
$(this)
.addClass("green")
.parent()
.removeClass();
has a closing ; on .removeClass();
In jQuery the Chaining is used to call multiple functions on an element selected but because you are ending the chaining with this line. Otherwise you will add the class to the parent of the <p> tag
.removeClass();
You're not applying the addClass to any object try removing the ; and then use something like
$("#box p").removeClass("green");
$(this)
.addClass("green")
.parent()
.removeClass()
.addClass("boxColor-" + $("#box p").index(this));
Here is an example of how it should work.
JSFiddle
first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
Regards,
Andrew
try the following:
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
(I remove the if because it's useless in this case)
Remove from all...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this
$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.
$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});
Another option would be:
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element