Question

I have the following HTML

<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="1" />

I can select .up_icon#1 but not .down_icon#1

var u = $(".up_icon#1");     //=  [<i class=​"up_icon" id=​"1">​</i>​]

var d = $(".down_icon#1");   //=  []

What am I missing here?

Answer 1

You should not duplicate ID like that. ID should be unique across document.

In your case you can use jQuery attribute selector function. See below,

<i class="up_icon" data-id="1"/>
<p class="position">1</p>
<i class="down_icon" data-id="1"/>

And then you can access them by .up_icon[data-id=1] and .down_icon[data-id=1]