How Does Jquery Work When There Are Multiple Elements With the Same Id Value

How does jQuery work when there are multiple elements with the same ID value?

Having 2 elements with the same ID is not valid html according to the W3C specification.

When your CSS selector only has an ID selector (and is not used on a specific context), jQuery uses the native document.getElementById method, which returns only the first element with that ID.

However, in the other two instances, jQuery relies on the Sizzle selector engine (or querySelectorAll, if available), which apparently selects both elements. Results may vary on a per browser basis.

However, you should never have two elements on the same page with the same ID. If you need it for your CSS, use a class instead.

If you absolutely must select by duplicate ID, use an attribute selector:

$('[id="a"]');

Take a look at the fiddle: http://jsfiddle.net/P2j3f/2/

Note: if possible, you should qualify that selector with a tag selector, like this:

$('span[id="a"]');

JQuery click event for multiple elements with same ID

You cannot give ID to multiple elements. You need to use class. Since you are giving multiple IDs it will only track the click event of first occurrence. You can do something like this.

<div data-videos-list="listelement" class="band-comments-div">
<label>
    <!-- Some code here-->
    <br><a class="band-comments" href="review.html?bandName=Local Band">Click to review</a>
</label>


$(docunment).on("click",".band-comments-div a", function(event) {
  event.preventDefault();
  alert($(this).attr("href"));
});

This way you can get the attr href of each a tag on click event.

Update

$(document).ready(function(){
 var href = ''; 
 $(docunment).on("click",".band-comments-div a", function(event) {
   event.preventDefault();
      href = $(this).attr("href");
  });
  alert(href);
});

Can two elements on two different pages have the same ID in HTML/CSS?

If each of the elements with the same ID resides on its own page, then jQuery will only ever see one element at a time, since only one such element with that ID exists in each page context at a time. It's as simple as that.

Access Multiple Elements of same ID in jQuery

Do not create markup that contains elements with duplicate IDs. This will break things, and you will be mauled by a velociraptor faster than you can say "goto".

Use classes instead:

<img src='0.jpg' id='images' />
<img src='...' class='myEle' />
<img src='...' class='myEle' />

then...

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", myEle.getNumber() + ".jpg"); 
    });
});

Re: OP comment

"How do i know which image is pressed?"

Use the this keyword:

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", $(this).attr('src')); 
    });
});

...I think that's what you're looking for.

select elements with same id and different attribute jquery

IDs are supposed to unique in DOM. So, you can change all ids to class instead and then you can access id-type='2' element easily like:

$("button").on("click", function() {  $("ul").find("li.post1[id-type='2']").css("border", "5px solid red");});

li {  margin: 5px 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><ul>  <li class='post1' id-type='1'> I dont want to be selected</li>  <li class='post1' id-type='2'> I want to be selected only</li>  <li class='post3' id-type='2'> text</li>  <li class='post2' id-type='2'> text</li></ul><button>elegir id='post1' id-type='2'</button>

const val = document.querySelector('[id="' + hour + '"] .hourinput').value;

$(function() {
  $('.clsAddToCart').bind('click', function() {
    $.getJSON('{{ url_for("func_add_to_cart") }}', {
      productID: $(this).prev().val(),
    }, function(data) {
      $("#result").html(data.result);
    });
    return false;
  });
});