使用jQuery影响具有相同ID的div

Question

I have more than 1 div with the same id, and I'm trying to use jquery to affect all of them at the same time, as oppose to just the first div. Is there a way to do this without changing the div id?

<div id = '1'>
<div id = '1'>
<div id = '1'>

//codes
document.getElementById(1).innerHTML = data;
$("#"+1).hide();
$("#"+1).fadeIn(500);
//codes

Answer 1

id is supposed to be unique. Instead use a class.

 $( document ).ready(function() { $(".fader").html("testing"); $(".fader").hide(); $(".fader").fadeIn(500); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fader">test</div> <div class="fader">test</div> <div class="fader">test</div> 

Answer 2

In HTML, the id attribute should be unique throughout the entire document. There should never be 2 elements having the same id attribute value.

What you need to do is use a class, which can be used on many elements throughout the html document.

<div class="theClassName"></div>
<div class="theClassName"></div>
<div class="theClassName"></div>

var elementsArray = document.getElementsByClassName("theClassName");
for(var i = 0; i < elementsArray.length; i++) {
    var element = elementsArray[i];
    // do something with each element
}

Answer 3

Using Attr selector can resolve your problem.

$('[id='1']')

But that is very not recommend, because the id attr is design to be unique.Instead of that, you can use class or name attr.

<div class='someClass' name='someName'>
<div class='someClass'>
<div class='someClass'>

// using class
$('.someClass').hide();

// using name
$('div[name='someName']').hide();