jquery not adding class when using eq() - javascript

Having a bit of trouble when using this:
$('.instrumentSelect').click(function(){
var thisElement = $(this).index();
$('.instrumentSelect').eq(thisElement).addClass('active');
$('.active').removeClass('active');
});
removes class just fine, I console logged var thisElement and returns the correct index, just not appending the class to it. Fire bug does not return an error.

I'm not sure what you're trying to do, but removing the class first and adding it later makes more sense. Also, why are you using index and eq() when you can add a class with $(this)?
Try this:
$('.instrumentSelect').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});

$('.instrumentSelect').click(function(){
var thisElement = $(this).index();
$('.instrumentSelect').eq(thisElement).addClass('active');
$('.active').not($(this)).removeClass('active');
});
or more simply you invert those lines like this
$('.active').removeClass('active');
$('.instrumentSelect').eq(thisElement).addClass('active');
You are adding it and then removing it. You have to exclude the object you are manipulating.

Probably you're trying to clear .active class before adding it to current item
$('.active').removeClass('active');
$('.instrumentSelect').eq(thisElement).addClass('active');

Related

jQuery .not() function not working

I recently met a problem with .not() function, this is the code:
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $('.test').parent('div');
// do something
parentDiv.find('.test').addClass("updated");
//Above: change this element's status
});
}, 3000);
Problem is:
Sometimes when the element $('.test') who has class 'updated' also within the loop.
What I think:
it means the not() selector not working?
So I would like to know what is REALLY the problem of the code?
Your code is finding all the elements with class "test", and then excluding those that also have the class "updated".
Then, for each of those elements, you're doing another .find() operation to find elements with class "test". That, however, does not include the .not() call, so if you have an element with class "test" nested inside another one, it will be affected whether or not it already has class "updated".
I think your code really should just be like this:
var interval = setInterval(function() {
$('.test').not('.updated').addClass("updated");
}, 3000);
You don't need the .each() because .addClass() will do that for you.
edit — if you do need to do more work inside a .each(), your code would look like this:
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $(this).parent('div');
// do something
$(this).addClass("updated");
//Above: change this element's status
});
}, 3000);
Inside the .each() callback, this will be bound to each of the selected elements from the outer jQuery sequence: the set of elements that have class "test" but not class "updated". If you use $(".test") again inside the .each() callback, that will start all over again and find all the elements with class "test" in the entire page.
Here is your updated function which should work use $(this) instead of $('.test') inside the each loop
var interval = setInterval(function() {
$('.test').not('.updated').each(function(){
var $parentDiv = $(this).parent('div');
// do something
$(this).addClass("updated");
//Above: change this element's status
});
}, 3000);
As you are referencing in the each $('.test') which is all the test class .updated or otherwise that is the reason the .updated class is still coming up in the loop
You are using .find() which is used to select all descendants of that element.
Refer .find()
Therefore, in your case, the scenario is class .test without class .updated will search in all its children to find class .test and it will add class updated to it. So, all the children whether or not they are having class .updated, .updated class will be added to it.
Hence, what you want to do can be simply achieved by this:
$('.test').not('.updated').each(function(){
$(this).addClass("updated");
});
or why not simply,
$('.test').not('.updated').addClass('updated');

Check if list element is visible (jquery.visible)

I'm trying to check if each element of an ul list is visible using the jquery.visible plugin. The problem is that the script does not handle each "li" element as independent, so putting this:
var element = $("ul li");
if (element.visible(true)) {
element.removeClass("hidden");
}
Removes the "hidden" class of all elements at the same time.
Any ideas?
You are initializing element as an array, so the name is misleading, and it may be throwing you off later in the code.
You want something like this (untested):
var arrElements = $("ul li");
arrElements.each(function() {
if ($(this).visible(true)) {
$(this).removeClass("hidden");
}
});
Note that I am using the each method and $(this) to act on only one li element at a time.
How about checking just the css property:
if(element.css('display') != 'none')

remove jquery elements that do not have a class

Hi can any one help me get all elements in jquery that do not have a class.
I have a list and I want to get all of the that do not have a class and delete it
Here is the code I have so far
var listTableHeaders = $("ROI-List").find("th");
listTableHeaders.not(".sorting").remove();
I realized that there are other classes other than "sorting" as seen in this pic
I can just remove the elements that are not "sorting" or "sorting_disabled" but I am not sure if there are other classes so it would be more convenient to remove the th that do not have any class.
Thank you
You can filter it
listTableHeaders.filter(function(){
return !$(this).is('[class]');
}).remove();
Something like this:
$("ROI-List").find("th").each(function () {
if (!$(this).prop('class').length) {
$(this).remove();
}
});
I belive this will work for what you're trying to do:
$("ROI-List").find("th:not([class])").remove();

addClass append every time in every Clone

This is my script
var newclass = 0;
jQuery("#addexperience").click(function(){
$("#expclone").clone().find("input:text").val("").end().prependTo( ".exp_clone" );
$(".ongoing").each(function(){
$(".ongoing").addClass("newclass"+newclass);
newclass++;
});
});
I am tring to clonning a perticular div, and add an class on clone element.
but addClass append every time,
means in first clone it added: newclass1, in second clone it added: newclass1 newclass2; so on..
i want only newclass2 in second clone, and newclass3 in thire clone and so on..
Try this,
var newclass = 0;
jQuery("#addexperience").click(function(){
$clone=$("#expclone").clone()
$clone.find("input:text").val("");
$clone.find(".ongoing").removeAttr('class') // remove all classes
.addClass('ongoing'); // again add ongoing class
$clone.find(".ongoing").each(function(){
$(this).addClass("newclass"+newclass);
newclass++;
});
$clone.prependTo(".exp_clone");
});
But, is is better to give an new id instead of new class.
You should use $(this) inside the callback of .each:
$(".ongoing").each(function(){
$(this).addClass("newclass"+newclass);
newclass++;
});
Or you even don't need the variable newclass, .addClass accept a function as parameter:
$(".ongoing").addClass(function(index) {
// index is start from 0
return "newclass" + (index + 1);
});
This is because every time you clone an element, it's going to add the class to each of those elements even though it is already present. What you do is, once you clone the element, get the last cloned element and addClass only for that. Remove the .each() function and try:
$(".ongoing").last().addClass('newClass'+newclass);
newclass++;
change this line:
$(".ongoing").addClass("newclass"+newclass);
to:
$(".ongoing").removeClass().addClass("newclass"+newclass);
it will remove all previous classes of .ongoing and add new class in it.
if you want to have .ongoing class then try like this:
$(".ongoing").removeClass().addClass("ongoing newclass"+newclass);

Toggle between selected classes

I find my self doing this a lot:
$(document).on("click","li",function(){
$(".selected").removeClass("selected"); // Remove any old selected
$(this).addClass("selected"); // Apply selected to this element
});
Is there a better and less repetitive way of doing a task like this? Like toggle a class. Btw, only one element can be selected at a given time.
Thanks.
A more efficient way is to keep track of the last selected item:
var $selected = null;
$(document).on("click", "li", function() {
if ($selected) {
$selected.removeClass('selected');
}
$selected = $(this).addClass('selected');
});
Of course, this should work as long as that particular function is the only one that will ever add / remove the selected class.
This could optionally be wrapped inside a closure to remove the $selected variable.
Btw, using document as the anchor for your delegation isn't best practice. It's better to choose the nearest node that will not get removed from the document.
Update
As Kevin B has mentioned, you could eliminate the branch like so:
var $selected = $();
$(document).on("click", "li", function() {
$selected.removeClass('selected');
$selected = $(this).addClass('selected');
});
The ability to use $() was introduced in 1.4; before that you would use $([]).
You can do this:
<script>
$(document).ready(function(){
$(this).on("click", "li", function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
After debating with Jack I propose mine.
Assuming your list is here :
var $myList = $('#list');
Then:
$myList.on("click","li",function(){
$(".selected",$myList).removeClass("selected"); // Remove any old selected
$(this).addClass("selected"); // Apply selected to this element
});
or
$myList.on("click","li",function(){
$(this).siblings(".selected").removeClass("selected"); // Remove any old selected
$(this).addClass("selected"); // Apply selected to this element
});
Your way of doing it is good enough for me but Jack's is faster and mine is in between both.
I like this one because you don't need to assume there will only be one selected element. And searching is faster when we provide context as far as I know
Thinking about this, you could keep your list elements in a variable, such as:
var $liElements = $('#yourContainer > li');
$(document).on("click","li",function(){
$liElements.not($(this)).removeClass("selected");
$(this).addClass("selected");
});
The notion of keeping track of the current element is the same as the other answers, but you can wrap this logic up cleanly in a function such as
function class_swapper=function(cls){
var cur;
return function(elt){
if (cur) { cur.classList.remove(cls); }
elt.classList.add(cls);
cur=elt;
};
};
A call to class_swapper returns a function used to actually apply the specified class to a particular element (and remove it from the previous one, which is remembered inside the function). You can use this as follows:
var swapper=class_swapper("selected");
swapper(elt1);
swapper(elt2);
or in terms of your example
$(document).on("click","li",function(){swapper(this);});
I've used classList.add and classList.remove, which is a classy way (ouch) of manipulating classes in modern browsers, but of course these could be replaced by jQuery's addClass etc. as necessary.

Categories

Resources