0

Por que não da pra colocar o HTML identado no jQuery? Se eu coloco ele em "linha reta" ele funciona, ja se eu coloco ele identado, pra ficar mais fácil editar depois, ele ja não funciona. Por que?


SEM FORMATAÇÃO, FUNCIONA:

$j('<div class="filters"> <div class="title title--sm lucas"><span>FILTROS</span></div> <div class="filters__list"> <div class="filters__filter cor "> <div class="filters__name">Cor </div> <ul class="ul--0"> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0"> <span class="label">Amarelo</span> </a> </li> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0"> <span class="label">Azul</span> </a> </li> <li class="li--0"> <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0"> <span class="label">Branco</span> </a> </li> </ul> </div> </div> </div>').insertAfter('main.col-main');


COM FORMATAÇÃO, NÃO FUNCIONA:

$j('<div class="filters">
   <div class="title title--sm lucas"><span>FILTROS</span></div>
   <div class="filters__list">
      <div class="filters__filter cor ">
         <div class="filters__name">Cor </div>
         <ul class="ul--0">
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0">
               <span class="label">Amarelo</span>
               </a>
            </li>
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0">
               <span class="label">Azul</span>
               </a>
            </li>
            <li class="li--0">
               <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0">
               <span class="label">Branco</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>').insertAfter('main.col-main');

2 Respostas 2

3

Porque a partir do momento que é uma nova linha é uma nova instrução, nesse caso você precisar concatenar as linhas para valer como somente uma instrução:

$j('<div class="filters">' +
   '<div class="title title--sm lucas"><span>FILTROS</span></div>' +
   '<div class="filters__list">').insertAfter('main.col-main');

Coloquei somente parte do código para deixar claro o problema.

3
  • 1
    Obrigado, Lucas, não sabia disso! :) 24/05/2017 às 14:14
  • Se a resposta atendeu, poderia marcar como aceita @LucasCarvalho?
    – BrTkCa
    24/05/2017 às 14:30
  • Sim, claro! Só estava esperando, pôs não dava pra marcar antes de 10 minutos acho, mas agora foi. 24/05/2017 às 14:36
0

Outra forma de inserir textos multi-linhas é com template strings do ES6. Para declarar uma template string é necessário envolver o texto por crases, dessa forma:

`<div class="filters">
 <div class="title title--sm lucas"><span>FILTROS</span></div>
`

Dessa forma dispensa o sinal de + para concatenar.

Para usá-lo o browser precisa ter compatibilidade com esse recurso ou usar algum transpiler, como Babel.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .