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.
Related
I have below html and want to get the element based on 'natural' class. The reason is I get t dynamic classes after 'natural'
<coral-checkbox class="natural coral-Form-field coral3-Checkbox" ></coral-checkbox>
I am trying below code to get hide the element but it is not working.
$("coral-checkbox[class='.natural']").hide();
But it is working when I select entire class like below but I need to do with only 'natural'. Is this possible ?
$("coral-checkbox[class='.natural coral-Form-field coral3-Checkbox']").hide();
Use .classname to select based on any of the element's classed. When you use an attribute selector, it matches the entire attribute (unless you use modifiers like *=, but they're not appropriate here, either).
$("coral-checkbox.natural").hide();
Use the class the selector instead of the attribute selector:
$("coral-checkbox.natural").hide();
I am trying to type text in the textbox using selectors. However the textbox shares the same ID.
How can i index selectors. I was able to do it via xpath. However i need to pass it as selector
textbox id = #input1
Element IDs should be unique within the entire document. I recommend that you avoid using the same ID for several elements.
You might want to enumerate elements by their type (input). Refer to the Enumerate Elements Identified by a Selector topic where this example is illustrated in action.
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 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/
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.