addclass

Well, I know that with some jQuery actions, we can add a lot of classes to a particular div: <div class="cleanstate"></div> Let's say that with some clicks and other things, the div gets a lot of classes <div class="cleanstate bgred paddingleft allcaptions ..."></div> So, how I can remove all the classes except one? The only idea I have come up is with this: $('#container div.cleanstate').removeClass().addClass('cleanstate'); While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put

I need to detect some class changing, i use for this DOMAttrModified, but something is wrong, what? var first_img = $('body').find('li:first').find('img'); first_img.on('DOMAttrModified',function(e){ if (e.attrName === 'class') { if ($(this).hasClass('current-image')) { $(this).removeClass().addClass('previous-image'); } console.log('log'); } }); Thx for advice. The immediate problem is that a attrName property isn't part of jQuery's event's object...you need to use e.originalEvent.attrName . Here's an example of it working: var first_img = $("body").find("div").first(); first_img.on(

Looking to change the border color on a box.. ..when the user mouses over/out.. Here's the attempted code.. Needs Work! JQuery: <script> $("result").hover( function () { $(this).addClass("result_hover"); }, function () { $(this).removeClass("result_hover"); } ); </script> CSS3: <style> .result { height: 72px; width: 100%; border: 1px solid #000; } .result_hover { border: 1px solid #fff; } </style> HTML5: <div class="result"> <div class="item"> <div id="item1"> <i class="icon"></i> ## </div> </div> <div> Thanks for looking You forgot the dot of class selector of result class. Live Demo $("

I'm trying to do something very simple. Basically I have a clickable div 'hot spot', when you click that it fills the screen and displays some content. I achieved this by simply changing the class of div, removing 'spot' and adding 'grown' and there's a little CSS animation to make it grow. This works fine. The problem is, within this div there is a close_button, which at the moment is just text. I want this to switch the classes back - i.e. remove grown and readd spot. It doesn't do this when clicked. I believe it's to do with the element not having those classes when the DOM loads, but I'm

$(document).ready(function(){ $("#info-text-container").click(function(){ $("#info-text").delay(500).addClass("info-text-active"); }); }); This does not put an delay on it when it gets clicked. Which I want to accomplish. Why and is this hackable, possible to overcome? Thanks! delay only works with animating methods, you can use setTimeout function: $("#info-text-container").click(function(){ setTimeout(function(){ $("#info-text").addClass("info-text-active"); }, 500); }); Not quite like that, but like this for example: $("#info-text").delay(500).queue(function(next) { $(this).addClass("info

What are the benefits of using attr() instead of using addClass() in jquery? ShankarSangoli When you use attr method to set the class of any element it will override the existing class name with whatever value you pass as the second argument to attr method. Where as if you use addClass method to add any class to an element it will just add the class and also retain the existing classes. If the class to add already exists then it will just ignore it. E.g. <div id="div1" class="oldClass"></div> Using $('#div1').attr('class', 'newClass') will give <div id="div1" class="newClass"></div> Where as

what am I doing wroing here? $(function() { $('ul li:nth-child(1)').addClass("go").delay(4500).removeClass("go"); $('ul li:nth-child(2)').addClass("go").delay(1500).removeClass("go"); $('ul li:nth-child(3)').addClass("go").delay(500).removeClass("go"); $('ul li:nth-child(4)').addClass("go").delay(4500).removeClass("go"); $('ul li:nth-child(5)').addClass("go").delay(1000).removeClass("go"); }); Just to add, you can use a .queue : $('ul li:nth-child(1)').addClass("go") .delay(4500) .queue(function() { $(this).removeClass("go"); $(this).dequeue(); }); .delay() is only designed to work with

Is there any selector available to add IDs like there is for adding a class - addClass()? ID is an attribute, you can set it with the attr function: $(element).attr('id', 'newID'); I'm not sure what you mean about adding IDs since an element can only have one identifier and this identifier must be unique. do you mean a method? $('div.foo').attr('id', 'foo123'); Just be careful that you don't set multiple elements to the same ID. Like this : var id = $('div.foo').attr('id'); $('div.foo').attr('id', id + ' id_adding'); get actual ID put actuel ID and add the new one I've used something like this

In jQuery, is it recommended to check if a class is already assigned to an element before adding that class? Will it even have any effect at all? For example: <label class='foo'>bar</label> When in doubt if class baz has already been assigned to label , would this be the best approach: var class = 'baz'; if (!$('label').hasClass(class)) { $('label').addClass(class); } or would this be enough: $('label').addClass('baz'); jmar777 Just call addClass() . jQuery will do the check for you. If you check on your own, you are doubling the work, since jQuery will still run the check for you. A simple