jQuery How to Continue Javascript to New Line?


This is lingering question I have and while it may seem like a noob - that's ok as I am one.

How do I continue a new line in jQuery selectors ? I understand that javascript new lines are simply

(\) single backslash

Such as

var someString = 'abc\
defghi';
alert(someString);

Yet using jQuery - this doesn't work when I am listing long selectors ? i.e.

$('#id, .class, .class1, .class2, .class3, .class4, .class5, \
   .class6, .class7').click(function() {
      //some stuff
});

Can anyone shed some light how to resolve this ?

$('#id, .class, .class1, .class2, .class3, .class4, .class5, ' + 
  '.class6, .class7').click(function() {
      //some stuff
});

http://jsfiddle.net/X6QjK/


What's inbetween the $() is simply a string. With that said, how would you split a string into two pieces?

$('big selection text' +
  'more selection' + 
  'more selection still')

Alternatively, you could add to your collection after your initial selection:

$('big selection text')
    .add('more selection')
    .add('more selection still')

jQuery is JavaScript. Don't be fooled into thinking that there's a difference. Is your code working with everything on a single line?

I'd guess that your selector is not actually selecting any elements (DOM elements probably don't exist when the selector is called).


In JavaScript, strings cannot span multiple lines, so to encode a multiline string you would do the following:

var s = "This is a\n" +
        "multiline\n" +
        "string.\n";

Note that the newline characters (\n) are only required if you really want newlines in the string. Your example would look like this:

$('#id, .class, .class1, .class2, .class3, .class4, .class5, ' +
  '.class6, .class7').click(function() {
    //some stuff
});

You can just close the string and use the + operator to add the strings.

$('#id, .class, .class1, .class2, .class3, .class4, .class5,' +
   '.class6, .class7').click(function() {
      //some stuff
});

This should work.


I suspect the reason for this not working for you is that when you feed the string over multiple lines like this, it obviously includes a new line character. Possibly jQuery doesn't like this newline being in its selector string.

My advice would be to simplify things by giving each of the elements you want this to apply to a single shared class, which would negate the need to have excessively long selector strings like this.

But if you can't do that, then you can resolve the problem by breaking the string into separate sections and using + to concatenate them, rather than continuing the string over a line line.


Today another option is using template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

$(`#id, 
   .class, 
   .class1, 
   .class2, 
   .class3, 
   .class4, 
   .class5,
   .class6, 
   .class7`).click(function() {
  //some stuff
});