CODEWITHSUNDEEP
javascriptjquerydom
Kango
Kango

Reputation: 847

How can I apply a jQuery function to all elements with the same ID?

I am new to jQuery. I have the following code: 

jQuery(document).ready(function() {
    jQuery('#carousel').jcarousel();
});

It only applies to the first ul with id="carousel", not for the others. How can I apply it to all elements which have the same ID?

HTML: 

<!-- jQuery applies to this div -->
<div id="slideshow-carousel">
    <ul id="carousel" class="jcarousel jcarousel-skin-tango">
        <!-- ... -->
    </ul>
</div>

<!-- jQuery does not apply for this div -->
<div id="slideshow-carousel">
    <ul id="carousel" class="jcarousel jcarousel-skin-tango">
        <!-- ... -->
    </ul>
</div>

Upvotes: 4

Views: 6485

Answers (4)

Adil
Adil

Reputation: 148110

The IDs for elements are supposed to be unique in the DOM. Having the same ID for two or more elements is not valid html. To share functionality across elements, assign them a common class, rather than giving them the same ID. If you can't assign them a common class, the workaround below will allow you to select elements with the same id attribute:

Using the same ID (If not possible to change ID)

jQuery(document).ready(function() {
    jQuery('[id=carousel]').jcarousel();
});

Using a common class (Recommended way)

jQuery(document).ready(function() { 
    jQuery('.carousel').jcarousel();
});

Upvotes: 9

MAAAAANI
MAAAAANI

Reputation: 196

In this situation you should use class. You can not use id. Otherwise you can try the below code. 

jQuery('ul').jcarousel();

Upvotes: 0

Sviatoslav Zalishchuk
Sviatoslav Zalishchuk

Reputation: 739

In recent versions of jQuery, when you have multiple id's on the page, selector will return only the first 'id' that was found in the DOM. You should use class instead.

Upvotes: 3

mornaner
mornaner

Reputation: 2424

You can't have more than one element with the same Id, that's why is not working. You should use class="caroussel" instead.

jQuery(document).ready(function() {
    jQuery('.carousel').jcarousel();
});

Upvotes: 9

Related Questions