Question

I have a question about the class selector in jQuery. I’m looking at a page which uses a jQuery plugin called slidedeck, and the page author has two <div>s showing two different slidedeck settings. Along these lines:

<div id="slidedeck_frame" class="skin-slidedeck"><dl class="slidedeck">
  <!-...HTML in here-->
</div>

<script type="text/javascript">
        $('.slidedeck').slidedeck({
                autoPlay: true,
                cycle: true, 
                autoPlayInterval: 2500, // 2.5 seconds
                hideSpines: true
            });
</script>

<div id="slidedeck_frame" class="skin-slidedeck"><dl class="slidedeck">
  <!-...HTML in here-->
</div>

<script type="text/javascript">
            $('.slidedeck').slidedeck();
</script>

So you have two <div>s sharing the same ids and CSS classes for their children, but with different slidedeck settings.

I would have thought the jQuery class selector would have applied the last slidedeck setting to both <dl>s, but in fact they each use the slidedeck settings directly below them. I must not be understanding the jQuery selector scope (quite likely), or is there something else at play here possibly?

Answer 1

Duplicate IDs are not valid in HTML. The behavior is not defined.

EDIT

In this case, as you are not using the ID as a selector, your jquery selector should return both of the tags with the class in the selector.

http://jsfiddle.net/cJ4wp/