$('#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.
Related
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>
I have a list of divs (#div1, #div2, #div3 etc). Each one of those divs contain different pictures and texture. The divs share the same layout class and they all contain a checkbox (all checkboxes also have one class).
I want the individual div to toggle class when the checkbox inside it are checked.
How to manage this without all divs toggle class when click a checkbox in one div?
Thanks.
http://jsbin.com/exasow/1/edit
$(':checkbox').click(function(){
$(this).closest('div[id^=div]').toggleClass( 'superclass' );
});
you can use both click or change function.
http://api.jquery.com/closest/ will allow you to have your checkbox inside other elements, it will always search up the DOM tree for the desired parent:
div[id^=div] means DIV element which ID starts with the word "div" and will work for all your div1, div2, div*** selectors.
Try this. DEMO.
Use the .click() for the checkbox and then get its parent div by using .parent() then call .toggleClass('classforparentdiv').
UPDATE
Here.
Hope it helps.
Give a Id to the checkboxes and on basis of that toggle the parent div class
or, listen to the event and toggle the class of the parent div
Something like this,
$(event.currentTarget).parent().toggle('className');
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);
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
I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.
.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');
Try
$(element).parent().find('.removeThis').remove()