CODEWITHSUNDEEP
javascriptphpjquery
jessica
jessica

Reputation: 1687

Using jquery to affect divs with same id

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

Upvotes: 0

Views: 64

Answers (3)

Jelly
Jelly

Reputation: 377

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();

Upvotes: 0

agenaille
agenaille

Reputation: 211

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
}

Upvotes: 2

Matt
Matt

Reputation: 5428

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>

Upvotes: 2

Related Questions