Can an HTML element have both an ID and a Class? - javascript

I was wondering if you can use both an ID and a Class in an HTML element.
For example an ID for individual styling.
And then a class for duplicate event handling on multiple elements

Yes it is possible no problem in it. The class can be used for more than one elements and id should be unique (one Element one Id).
i.e <div id='myDiv' class='myClass'></div> is correct and has no Problem you can have another Div like <div id='myDiv2' class='myClass'></div>

Related

Get the div by partial value of id attribute

I have a div in my form
<div id="s2id_s52dcecf43a846_membership">
<div>
I want to find the div by the name "membership" because the other elements of the id are randomly generated.
How to get the div by just getting the partial value of the div id ?
I want to get it via jQuery/Javascript.
Thanks,
FaisalNasir
If the id starts with "membership" and then comes the random part you can use:
$('[id^="membership"])
You can also use "contains" selector, like
$('[id*="membership"])
If you want to search by the name, you can use
$('[name=membership]');
Keep in mind this might give you more than one element.
You can also check more selectors here
just getting the partial value of the div id
Just try the attribute contains selector,
$('[id*="membership"])
Or the better way would be add a common class to those elements
Please read here to know more about Jquery selectors

jQuery selecting all divs of a kind and attaching event

$('#tags').each(function(i,element){
$(this).on('click',function(){
$('.otherdiv').toggle();
});
How can i attach the click handler to ALL divs with the id of tags? for some reason this is only targetting the first one
There is no need for the each, just do:
$('.tags').on('click',function(){
$('.otherdiv').toggle();
});
and apply a class of tags to each of the divs, you should not have multiple divs with the same id.
This will then apply the on click bindings to all divs with a tags class.
You should not have more than one ID.
use classes instead.
$(".tags").click(function() {
$('.otherdiv').toggle();
});
attribute the css class to every element you want
IDs are unique. You shouldn't have more than 1 element with any given id.
As noted in other answer, use class instead to select multiple elements.

How can I select an element by id and class in javascript?

I want to know if we can select an element by using its id and class at the same time. I know in css we can do that with #x.y, but but how can it be accomplished in javascript? I tried the following code and it worked fine but then all the controls with ui-slider-handle class got affected(which is obvious). I think I need a combination of id and class both so that only that particular element will be affected.
Javascript:
$(".ui-slider-handle").text(ui.value);
A combination of ID and class for selecting elements is useless as IDs are meant to be unique.
never have multiple identifiers with the same value in one page!
If you want multiple elements with the same attributes, use a class. If not, consider an ID or a class.
If you want to have a lot of elements with the same attributes, but one with extra attributes, you can give that one an ID and assign extra attributes to the ID
You will never need to do this since the ID is unique; if you know it, you can already identify the element.
Your problem is actually that your selector matches too many elements. There are other ways to limit the "range" of a selector:
Add a parent element with a certain ID/class: .parent .ui-slider-handle matches only elements with the class ui-slider-handle that are children of all elements with the class parent
You can also limit by parent type: div .ui-slider-handle
Or only direct children: div > .ui-slider-handle
See jQuery selectors for all the goodies.
Since ids should be unique, you should be able to do your selector by only id. If are wanting to apply the same attribute to multiple elements, then you should use a class. In your scenario it seems you should be fine with just using id like this:
$("#id").text(ui.value);
What you can write is:
$("#ID.ui-slider-handle").text(ui.value);
The string inside the quotes is a normal CSS selector, which supports both classes and ids. However, the above code is redundant and slow, and unless you want to select that particular id only if it has a certain class, it would be preferable to write:
$("#ID").text(ui.value);

Jquery doesn't apply hide() to all of the divs with the same ID

I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.
You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.
IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();
That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.
an ID can only be used ONCE in HTML! because its a id and a id should always be Unique

How to select an element that must have more than one css class?

I have an element that has two classes at all times:
<p class="general_description laptop">
<p class="images laptop">
<p class="specs laptop">
One class describes the item (laptop) and the other (general_description, images, specs) describes the state that the page needs to be in to present one of three types of information about the item.
How can I show or hide the <p> element only if both classes in my selector are present?
For example, if I only want to show the <p> element that corresponds to both the specs and laptop classes, I have tried doing this but it does not work:
$(".specs .laptop").show();
$(".specs.laptop").show();
OR
you could use the is() function in jquery. it takes a selector and tells you if the element conforms to it:
$(".specs").is(".laptop"); //returns true if the element has the laptop class
IIRC, it is:
$(".specs").filter(".laptop").show()
Get rid of the space between the class names.
$(".specs.laptop").show();
Reference: jQuery

Categories