HTML Javascript - Get all elements with ID

I am using the waterwheel-carousel image slider located here. I would like to have multiple carousels on one page.

Here is a snippet of my code:

<script>
    // load carousel
    $(document).ready(function () {
        $("#waterwheel-carousel").waterwheelCarousel({
            separation: 90,
            separationMultiplier: 0.2,
            horizonOffsetMultiplier: 1
        });
    });
</script>
.
.
.
<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>     

<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

And the CSS:

/* Projects page carousel(s) */
#waterwheel-carousel {
  width: 200px;
  height: 216px;
  position: relative;
  clear: both;
  overflow: hidden;
  margin: 0 auto;
}
#waterwheel-carousel img {
  cursor: pointer;
  border: 5px solid black;
}

The issue is that only the first #waterwheel-carousel will load. The other two do not. I did some research and it seems like it may only be returning the first element with that id. So I have tried a different approach on my $(document).ready(.. function, adding class="waterwheel-carousel" to each div:

<script>
    $(document).ready(function () {
      var allElements = $(document).getElementsByClassName("waterwheel-carousel");
      for (var i = 0; i < allElements.length; i++) {
          var currentElement = allElements[i];
          currentElement.waterwheelCarousel({
              separation: 90,
              separationMultiplier: 0.2,
              horizonOffsetMultiplier: 1
          });
        }
    });
</script>

But then they all fail to load.

Anyone have any ideas?

Thanks.

Answers


Element IDs should be unique within the entire document. see

Instead of id use class to get all element

<script>
    // load carousel
    $(document).ready(function () {
        $(".waterwheel-carousel").waterwheelCarousel({
            separation: 90,
            separationMultiplier: 0.2,
            horizonOffsetMultiplier: 1
        });
    });
</script>
.
.
.
<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>     

<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>

This is what classes are for, IDs are unique. Which means that each element in the document must have a different ID.

Modify your HTML:

<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>     

<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>  

<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>

and you're good to go.


Need Your Help

Authentication/authorization in JAX-RS using interceptors and injection

rest java-ee jax-rs restful-authentication wildfly

I am developing a new application in JavaEE 7 using WildFly 8. I am using JAX-RS to provide a RESTful service interface for remote applications.

Preferred way of handling actions in a rest api

ruby-on-rails rest

While working on my REST api, i was wondering what’s the best practice is, when you need to handle certain actions, let me explain with a example.