Develop Reference

Change css class on child element

I'm using jQuery to remove CSS class from my elements:
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
Now on same action immediately I remove that class I want to add myClass for example so I tried:
$('.input-group-addon').child().addClass('myClass');
But this doesn't work, my element stays with class="" instead of class="myClass".

You don't need to use children() at all:
$('.input-group-addon > .glyphicon.glyphicon-calendar').removeClass();
Add class back to all direct ancestors:
$('.input-group-addon > *').addClass('myClass');

.child() is not a jQuery function replace it by .children() :
$('.input-group-addon').children().removeClass();
$('.input-group-addon').children().addClass('myClass');
Or without children() method :
$('.input-group-addon .glyphicon.glyphicon-calendar').removeClass();
$('.input-group-addon .glyphicon.glyphicon-calendar').addClass('myClass');
Hope this helps.

You need to specify the class you want to remove..
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass("className"));
Currently, this
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
removes everything.

Why is this attribute based selector giving error in jQuery?

alert($("div#keylist ul li").filter("[display=block]").first().position().top);
I do have a div with id as keylist and there is an unordered list in it. I want .position().top of first visible element.

Actualy [display=block] is not a right selector
use :visible selector instead
alert($("div#keylist ul li:visible").first().position().top);
I think this is what you need
alert($('ul > li').filter(function(){
return $(this).css('display') == 'block';
}).first().text());
Demo

As mentioned inn the previous answers [display=block] is not a selector. But if you still insist on selecting li elements which has this css property you can go by class
Here are few way you can achieve the same
// Using Filter
alert("Using Filter " +$("div#keylist ul li").filter(".blockDec").first().position().top);
Since you already have parent as div#keylist you can use find() rather than using filter()
Here is difference between filter & find
Also you can take a look Here & Here to optimized the selector
//Using find .Here it will find all child element of ul
alert("Using Find " +$("div#keylist ul").find(".blockDec").first().position().top);
//Optimizing the jQuery selector
alert("Optimized " +$("#keylist").find(".blockDec:first").position().top);
JSFIDDLE

How to find elements without a class in Jquery?

I have the following html
<div class="one">One<div>
<div class="two">two<div>
<div >three<div>
<div >four<div>
<div class="three">five<div>
How would I find the div elements which don't have a class attribute? ie three and four?

You can use :not selector
$('div:not([class])');
here is API
And a simple Fiddle

Use :not selector to filter
$('div:not([class])');

Combine the :not() selector with the attribute present selector [class].
$("div:not([class])")
jsFiddle.

Another option is to use .not() with Has Attribute Selector
$('div').not('[class]')

There are different ways to do it. You could use .children() to get the list and then index into that. Or you could look up the second element and use .next() to get its sibling.

Assuming you're not wanting to select all the dividers which have no classes, you can use nth-child to select specific ones if you know exactly where they are within a container. This will select your class-less dividers:
$('div:nth-child(3)') // Selects the third divider
$('div:nth-child(4)') // Selects the fourth divider
$('div:nth-child(3), div:nth-child(4)') // Selects both
JSFiddle example.
Alternatively you can select using .prev() and .next():
$('div.two').next() // Selects the divider after div class="two"
$('div.three').prev() // Selects the divider before div class="three"

jquery remove specific children

I have the following code :
$('.TopNotificationIcon span').remove();
Can I replace .TopNotificationIcon with this i.e only span exists inside this specific class.
This is the structure
<div class="TopNotificationIcon"><span>xxxxx</span></div>
On click of .TopNotificationIcon, span should be removed.

if you have click event for .TopNotificationIcon you can do something like this
$('.TopNotificationIcon').click(function(){
$('span',this).remove();
});

I would use the find() method, as it seems to be the fastest:
$("div.TopNotificationIcon").click(function() {
$(this).find("span").remove();
});

If you want to remove all span under TopNotification you can do this :
$('div').live('click', function(){
$(this).children('span').remove();
});
It will remove all children in a div.

Yes but youd need to change the line to:
$(this).children('span').remove();
js fiddle: http://jsfiddle.net/UNhhh/1/

Try this...
$('span').remove('.TopNotificationIcon');
This will remove all span elements with the class TopNotificationIcon and also child elements

using jquery, how do I check if an element is visible or not?

I also need to find out all the elements inside a div, and check for their visibility. How to do it?

The first part of your question sounds like you want to find all the elements inside of a div. And then check for visibility.
To get all elements that are descendants of a div, use:
$('#myDiv *')
So to test each element, and act accordingly based on visibility:
$('#myDiv *').each(function() {
if( $(this).is(':visible') ) {
// code to run if visible
} else {
// code to run of not visible
}
})

You can select them using the :visible and :hidden pseudo-elements. For example, selects all the visible descendants of a <div>.
$("div :visible")...
Of you can do a test using is(). For example:
if ($("#someId").is(":visible")) { ...

$('#myElement').is(':visible');
Will return true or false

Use the :hidden and :visible selectors.
$("div:visible").hide();
$("div:hidden").show();

use the $(div :visible) selector to select all visible elements in the div. you may loook at http://api.jquery.com/visible-selector/ for more details.