Two divs with same IDs [duplicate]

133
November 30, 2017, at 06:49 AM

This question already has an answer here:

  • JQuery handling element with the same ID 2 answers

I have a problem demo of which is shown below. I have two DIVS with similar IDs. When i try to apply the css property by jquery selector specifying the ID, It assigns it to one of them and not all of them.

<div id="blue" style = 'height:100px; width:100px; background:blue;'></div>
<div id="blue" style = 'height:100px; width:100px; background:red;'></div>

When I try to do this :

$('#blue').css('background','black');

It doesn't apply it to both of them. It works fine if i use class but in this case it should either apply it to both of them or none at all.

Answer 1

Why doesn't it work? Because:

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient

document.getElementById() returns only a single element, the first one it encounters.

Don't do this: use class names to select multiple elements.

Answer 2

The id attribute should be unique in the same document, use common classes instead, else if you don't have permissions to touch HTML code, you could use value selector like:

$('[id="blue"]').css('background','black');

Hope this helps.

READ ALSO
Progressbar.js Circle Inner Fill Gradient

Progressbar.js Circle Inner Fill Gradient

So, the thing is that I am trying to finish up this progress circles and my designer team is asking for me to change the fill by adding a gradient

165
How to style a psuedo element with a pseudo class using Styletron

How to style a psuedo element with a pseudo class using Styletron

In attempting to add a material design ripple animation to a button I took a pure css implementation here and used it

96
force trigger hover on each element in list by timeout if cursor stopped move

force trigger hover on each element in list by timeout if cursor stopped move

I have a simple menu navigation list like ul>li*5>a and simple hover effects on liI want to make onload page if user dont moving cursor n-seconds, script starts to force hover on each li each n-second and repeating around

113
using $.getJSON and callback function yields no output

using $.getJSON and callback function yields no output

I'm trying to make a Google Chrome-extension for simple translationsI added a content-menu-item which is showing up when a text is selected

176