JQuery CSS selector strange behaviour, why?

Question

I'm working on some front end funcionalities. Actually I'm doing Ajax requests and modifying the UI after que call.

I identify related items/views to my Model (in front) using an ID which won't be unique because I select the different items by combining class + ID.

Quick Example:

 <div id="23"class="status_ic btn btn-info">Status Name</div>
 <div class="botones_applies" id="23">
     <div class="btn btn-xs btn-primary btn-acept" id="23">
     Acept
     </div>
     <div class="btn btn-xs btn-borrar btn-danger btn-deny" id="23">
        Deny
    </div>
 </div>

I'm doing this:

 $('.botones_applies#23').empty();
 status_btn = $('.status_ic#23');
 status_btn.removeClass('btn-info');
 status_btn.addClass('btn-primary');
 status_btn.text('Acepted');

I did more views using this kind of selector without any issue but here I'm experiencing the strange behaviour, my first selector is not working while the other one is working and they are using the same logic. I noticed that if I swap the order to $('#23.botones_applies') it works as expected. I can do it because doesn't break anything but I'm concerned about why this happens.

 $('.botones_applies#23') ---> doesn't work
 $('#23.botones_applies') ---> works
 $('.status_ic#23') ---> works

Is there some css or jquery rule that am I missing? Maybe some stupid little thing... Maybe I forget some important concept.. Would someone explain me this? Thank you!

id values must be unique in the document, so that's the problem you should solve, after which this problem likely goes away. — T.J. Crowder
– T.J. Crowder, Commented Oct 19, 2017 at 8:40
@MartinAdámek: No, that's not true; HTML only cares that they don't contain spaces. But it's much harder to use CSS to select them if they start with a digit, because you can't (officially) use a digit as the first character after # in a CSS ID selector. — T.J. Crowder
– T.J. Crowder, Commented Oct 19, 2017 at 8:41
@aaron0207: It's not "not a good practice," it's invalid. A browser is perfectly within its rights to completely ignore subsequent id="23"s in your markuip (or to ignore previous ones when it sees a new one). — T.J. Crowder
– T.J. Crowder, Commented Oct 19, 2017 at 8:45
@MartinAdámek: Agreed, if you intend to use a CSS selector with them. If not, there's nothing wrong with it at all. — T.J. Crowder
– T.J. Crowder, Commented Oct 19, 2017 at 8:46

T.J. Crowder · Accepted Answer · 2017-10-19 08:42:49Z

3

Is there some css or jquery rule that am I missing?

An HTML rule, yes: id values must be unique in the document.

Separately: While it's valid for id values to start with a digit, a CSS ID selector cannot, so #23 is an invalid selector. You'd need an escape (#\32 3, which in a string literal would need to be "#\\32 3") or an attribute selector([id="23"]).

answered Oct 19, 2017 at 8:42

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aaron0207 Over a year ago

$('[id="23"][class="botones_applies"]') and $('[id="23"][class="botones_applies"]') are working. Why the rare behaviour doesn't appear? All my Id's are numeric and all worked as expected.

T.J. Crowder Over a year ago

@aaron0207: Again: #23 is an invalid CSS selector, so the odd behavior isn't that it sometimes fails, it's that it sometimes works. (The reason is that jQuery tries to detect and optimize ID selectors and turn them into getElementById calls.) You don't want to use an attribute selector with class, though. Instead: $('.botones_applies[id="23"]') But again: Fix the IDs, It will bite you again. You're using them like classes. Use classes instead.

aaron0207 Over a year ago

Thank you, now I can understand it. I knew I was doing it bad but it was struggling with my mind because was working till I hit this case

Tiger_Mike · Accepted Answer · 2017-10-19 08:52:50Z

1

You do not have unique ids, this is your initial issue.

Could I also suggest applying JS specific classes instead of using ids. I like to prefix them with js- as well to set them apart from classes used for styling. The benefit of this is you can have duplicate classes but not ids.

edited Oct 19, 2017 at 8:52

answered Oct 19, 2017 at 8:46

Tiger_Mike

1468 bronze badges

Collectives™ on Stack Overflow

JQuery CSS selector strange behaviour, why?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related