jQuery very long selector

Question

Let's say I have jQuery selector which is very long, something like this:

jQuery('*:not(".navbutton, .navbutton span, #menuContainer, #rollmenu, #postersTheme, optgroup, optgroup option, .custom-select, .select-selected, #divSelectedSize, #divSelectedQty, #divSelectedCountry, #divSizeItems, #divQtyItems, #divCountryItems")').click(function(e) {
    // some code here...
});

Is there a way how to make this very long selector having each selector on a separate line so it would be better readable, something like this?

jQuery('*:not(".navbutton,
  .navbutton span,
  #menuContainer,
  #rollmenu,
  #postersTheme,
  optgroup,
  optgroup option,
  .custom-select,
  .select-selected,
  #divSelectedSize,
  #divSelectedQty,
  #divSelectedCountry,
  #divSizeItems,
  #divQtyItems,
  #divCountryItems")').click(function(e) {
    // some code here...
});

Of course, above hypothetical "shortening" does not work ending up in breaking jQuery completely, thus I am asking if anyone around here know if something like this can be done and if so, how?

you could try the backtick ` (note this is not a regular quotation mark rather this replaces them). This also allows you to use variables inside the text for example `\`I want ${fruit}\`` if the variable `fruit = "apple"` it would say "I want apple" — Roe, Aug 24 '23 at 13:58
@Roe sorry, what??? English is not my native language, so I do not understand what you mean, maybe you could post it as a answer instead so I would understand? That is to take my pseudo-code and make it into your code example? — fafa, Aug 24 '23 at 14:01
Aside from the problem, you should note that having a selector as long as that is a code-smell. It indicates that you should probably re-think your logic and/or DOM structure to improve it. — Rory McCrossan, Aug 24 '23 at 14:47

score 0 · Accepted Answer · edited Aug 24 '23 at 14:52

0

you could try the backtick ` (note this is not a regular quotation mark ' or " rather this replaces them). This also allows you to use variables inside the text for example I want ${fruit} if the variable fruit = "apple" it would say "I want apple".

For example (pay close attention to the ticks):

jQuery(`*:not(".navbutton,
  .navbutton span,
  // all requirements
  #divCountryItems")`).click(function(e) {
    // some code here...
});

edited Aug 24 '23 at 14:52

Rory McCrossan

331,213
40
305
339

answered Aug 24 '23 at 14:04

Roe

633
2
14

Yes, this is the correct solution - it works, thank you!. Still, I did not even know about this "backtick" sign - what is it and how it actually differs from the regular ' and "? – fafa Aug 24 '23 at 14:09
3

@fafa [Usage of the backtick character (`) in JavaScript](https://stackoverflow.com/q/27678052) | [Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) – VLAZ Aug 24 '23 at 14:10
Although this answers your question. There might be something fundamentally wrong with your code if you require that many classes and id's in your selector. It is hardly understandable in this form. – Roe Aug 25 '23 at 09:13

jQuery very long selector

1 Answers1