Search code examples
jquerymultipleselection

When use multiple selector, Uncaught SyntaxError: Invalid or unexpected token


I get this error.I want to add multiple selector and it gives error.what is the problem?

 jQuery(document).ready(function($) {
            $("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,
                .pagination>li>a,
                .ulockd-title-icon,
    .fancybox-gallery-slider .owl-prev,
    .fancybox-gallery-slider .owl-next,
    .team-icon a,
    .twitter.style2 ul li a,
    .text-thm, .text-thm2").css("color", textColor);;
            return false;
    });

Solution

  • You can adress this error a couple of ways:

    Use \ before each newline

    $("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title, \
        .pagination>li>a, \
        .ulockd-title-icon, \
        .fancybox-gallery-slider .owl-prev, \
        .fancybox-gallery-slider .owl-next, \
        .team-icon a, \
        .twitter.style2 ul li a, \
        .text-thm, .text-thm2").css("color", textColor);
    

    Use string concatination

    $("nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,"
      + ".pagination>li>a,"
      + ".ulockd-title-icon,"
      + ".fancybox-gallery-slider .owl-prev,"
      + ".fancybox-gallery-slider .owl-next,"
      + ".team-icon a,"
      + ".twitter.style2 ul li a,"
      + ".text-thm,"
      + ".text-thm2").css("color", textColor);
    

    Build selectors from array

    let selectors = [
      "nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title",
      ".pagination>li>a",
      ".ulockd-title-icon",
      ".fancybox-gallery-slider .owl-prev",
      ".fancybox-gallery-slider .owl-next",
      ".team-icon a",
      ".twitter.style2 ul li a",
      ".text-thm",
      ".text-thm2"
    ];
    $(selectors.join(',')).css("color", textColor);
    

    Using a template literal

    $(`nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,
        .pagination>li>a,
        .ulockd-title-icon,
        .fancybox-gallery-slider .owl-prev,
        .fancybox-gallery-slider .owl-next,
        .team-icon a,
        .twitter.style2 ul li a,
        .text-thm, .text-thm2`).css("color", textColor);
    

    or give them a common class

    As you can see having a lot of selectors like this is not easy to use. Not even speaking of managing changes over time.

    Why not give them a common class like changeable-color and only select that one. Easier to read and maintain.