Can I remove a specific CSS class from all XYZ elements within an element at once?
Example: Remove CSS class active from all <a> anchors within my search div.
If so, how?
$("#mydiv a").removeClass("active");
If search is a class:
$("div.search a").removeClass("active");
If search is an ID:
$("#search a").removeClass("active");
Yeah. You do it like this:
$("div a .className").removeClass("className")
Or, supposing you only want to do it on a certain div, as long as the div has an id attribute set, you could do this:
$("#divIDValue a .className").removeClass("className")
With jQuery selectors, # with some text after it refers to the object (div, span, anchor, whatever) with the id attribute set to whatever that text is. A period refers to all objects with that the class name matching the text coming after the period. As demonstrated above, you can nest the selector text. So in the examples above, here's what happens:
Example #1
Find all divs
Finds all anchors within all divs
Finds all of the anchors from #2 that have class .className
Example #2
Find the div with the id attribute set to "divIDValue"
Find all anchor tags within that div
Find all anchor tags within that list of anchor tags that match the class name className
Keep in mind that for all of the objects in your page, only one object can have any particular id value. So, you can have two objects with the id set to 'divIDValue' - although your page will still probably look OK, jQuery will only find the first item with id. Classes, on the other hand, can be used for multiple items (as you probably already know).
A more generic solution to remove the class from any possible element.
// I like to use find as I usually have my wrapper in a variable.
$('#my-wrapper').find('.active').removeClass('active');
Or
$('#my-wrapper .active').removeClass('active');
This will affect all elements within the wrapper: span, h3, div, li, td, etc. With html 5 there are now over 100 possible tags.
Related
I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.
Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');
If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text')
I want to select elements that have no child elements. This is because I want to select all the texts in a very complex website.
I do this like so:
$mainSection.filter(":not(:has(*))");
But then there are some special cases like this one:
<p>Some interesting text <wbr></wbr> that has an "optional word break" tag in it</p>
In this case I want to select the p, even if there is child element in it. But just if the child element is a wbr tag.
You can have another :not() within the :has() for excluding certain child elements:
$mainSection.filter(":not(:has(:not(wbr)))");
On a side note, if the outer :not() is the only part of your .filter() selector string, you can simply swap the .filter() out for a .not() to make the code a little less confusing:
$mainSection.not(":has(:not(wbr))");
Both of these statements mean the same thing in English: exclude elements from the set $mainSection that have any child elements that are not wbr.
I have two divs with ID #container.
In first one is class .current-content
[div#container -- div.current-content]
The second one is contained in class .next-content and contain class current-content
[div#container -- div.next-content -- div#container -- div.current-content]
Is possible to have only one #container with class .current-content with elements from second .current-content?
Eventually how do that?
Thanks. :)
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
from http://api.jquery.com/id-selector/
In following code, hasClass doesn't work and result is false in alert. why, what do i do?
Online Demo: http://jsfiddle.net/Fe3CK/
HTML:
<span>
<div class="adding"></div>
</span>
JS:
alert($('span').hasClass('adding'));
I think you might be misunderstanding what .hasClass does. It checks whether the element itself has one of these classes assigned. From the documentation:
Determine whether any of the matched elements are assigned the given class.
If you want to check whether the element contains an element with that class, use .has:
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
alert($('span').has('.adding').length > 0);
You need:
alert($('span div').hasClass('adding'));
since your span does not have any class adding. Only the child div of your span has it.
Updated Fiddle
Note: Only inline elements may be contained within inline elements. span is an inline element so block level elements like div or p cannot appear within a span.
Hence, <div> inside <span> tag is not a valid HTML5 markup so you should use <div> instead of <span> in this case.
You have to select div not span , as div has class of 'adding'
alert($('div').hasClass('adding'));
Demo
If you want to check any children of span has class, then you can try like this;
alert($('span').children().hasClass('adding'));
div inside a span is not a good practice and your span not have any class adding , adding is its child object's class so please use like
alert($('span').children().hasClass('adding'));
When i do something like :
$('#container').addClass("contract");
It only add class to the first div with id container
When i do something like :
$('.container').addClass("contract");
It adds the class to ALL the divs with class container
WHY ?
Every element ID must be unique. An ID points to one and only one attribute. Jquery or any other framework would not even consider that you might have more than one element with a particular id. All your elements need to have a different id. Javascript and the DOM expect this (document.getElementByID for example will return just one element, and might now work at all if the ID is duplicated). Everything expects this.
Because id attribute has to be unique in HTML document. So there is no need to search for any others eelements with id="abc" when you find a first one.
An element's ID attribute should uniquely identify it. A class attribute may be applied to more than one element. As ID is unique, jQuery will only apply it to the first element that matches that.