Error: Syntax error, unrecognized Expression with "string"

Question

I’m trying to use this script... but when I add the console returns me this error:

Error: Syntax error, unrecognized Expression: "#listProducts . showcase-0 > ul li.line listing > . flex-viewport ul"

What’s the big deal? When I remove everything and leave only double quotes before and after the selector... it passes! But this way I can’t use the variable in the selector.

Thanks for your help!

$(document).ready(function () {

	if(screen.width < 768) {
		//-- Pega o valor nativo da div do produto e divide
		let larg = document.querySelector("#listagemProdutos > ul li.listagem-linha ul li").clientWidth;
		let largResult = larg / 2;

		//desativa função nativa de prev e nextve remove atributo href logo no inicio do código
		let prevNext = "#listagemProdutos > ul li.listagem-linha ul .flex-prev, #listagemProdutos > ul li.listagem-linha ul .flex-next";
        $(prevNext).off().removeAttr("href"); 

            
		//Adiciona classe unica aproveitando o indice da nodeList gerado para selecionar as vitrines de forma independente.
		//Chama a função que cria o comportamento do carrossel, passando o parametro index que será o identificador chave
		//de cada classe única.
        var arrUl = document.querySelectorAll("#listagemProdutos .produtos-carrossel");
        for (var i = 0; i < arrUl.length; i++) {
            arrUl[i].classList.add("vitrine-" + i);
            criarCarrossel(i);

        } //-- FIM DO FOR

        function criarCarrossel (ii) {
            let firsts = '\"#listagemProdutos .vitrine-' + ii + ' .flex-viewport ul li:nth-child(-n+2)\"';
            let liUlt = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport li:last-child\"";
            let liRecipiente = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport ul\"";
            let btnPrev = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-prev\"";
            let btnNext = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-next\"";
            let liAtivo = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul li.ativo\"";
//console.log(larg);
                $(firsts).addClass("ativo").css("max-width", largResult + "px");
                $(liRecipiente).attr("data-pos", "0"); //posição inicial do slide


                $(btnNext).click(function(){btn_prox();});
                $(btnPrev).click(function(){btn_ante();});


            function btn_prox (){
                        if($(liAtivo).next().size() && $(liUlt).hasClass("")){
                            let elPosition = document.querySelector(liRecipiente);
                            let posAtual = parseInt(elPosition.getAttribute("data-pos"));
                            let largResultNeg = largResult * -1;
                            let novaPos = ((largResultNeg * 2) + posAtual);
            
                
                            $(liRecipiente).attr("data-pos", novaPos + "px").css("transform", "translateX(" + novaPos + "px)");
                            $(liAtivo).removeClass("ativo").css("max-width", "100%").next().addClass("ativo").css("max-width", largResult + "px");
                        } else {
                            $(liRecipiente).attr("data-pos", "0").css("transform", "translateX(0)");
                            $(liAtivo).removeClass("ativo");
                            $(firsts).addClass("ativo").css("max-width", largResult+"px");

                        } //-- FIM DO IF CARROSSEL

            } //-- FIM DA FUNÇÃO btn_prox

        } //-- FIM DO criarCarrossel

	} //-- FIM DO IF VERIFICADOR DE TELA

}); //-- FIM DE TUDO

Answer 1

You do not need to construct the selector with quotation marks. The variable inside $() already passes its own value as a reference.

For example, the variable string firsts only need the selector without delimiters (except string delimiter). When placing \" at the beginning and end of the variable, delimiting the string with single quotes, is the same as:

$('"seletor"')

That is, the selector is invalid because of double quotes, resulting in error in jQuery.

Just take those off \" of the variable, leaving only the simple quotes, which is correct the code.