3

Criei este FIDDLE como teste.

Tenho esta li dentro de uma variável e pretendo adicionar a classe c2 a essa mesma li

var linha = '<li id= "id1" class="c1"> ' + 
            '<div id="id2">1</div>' +
            '<div id="id3">2</div></li>'

document.getElementById('id1').addClass('c2');

O meu problema é que o document.getElementById('id1') dá-me sempre NULL e depois quando tento adicionar a classe dá-me o erro: inserir a descrição da imagem aqui

6
  • 2
    Retorna null porque o li está apenas numa variável e não no DOM.
    – Franchesco
    17/06/2015 às 11:24
  • @Earendul existe alguma maneira para apanhar a li estando essa numa variavel? 17/06/2015 às 11:26
  • 1
    onde entra o jquery nisso? 17/06/2015 às 11:33
  • por quê então não modifica diretamente na variável ? 17/06/2015 às 11:35
  • examplo: linha = '<li id= "id1" class="c2"> ' + 17/06/2015 às 11:35

3 Respostas 3

7

Estás a misturar elementos nativos com métodos do jQuery. O document.getElementById('id1')null porque no document (i.e. a página) não existe nenhum elemento com id id1. Ele existe somente dentro da string linha.

Se queres usar o addClass tens de selecionar o elemento com jQuery assim:

var linha = '<li id= "id1" class="c1"> ' +
    '<div id="id2">1</div>' +
    '<div id="id3">2</div></li>'
var $linha = $(linha);
$linha.addClass('c2');
$(document.body).append($linha); // ou dentro do <ul> que imagino que tenhas

jsFiddle: http://jsfiddle.net/9p37Lff1/

Podes criar uma div temporária para fazer mudanças dessas. Se usares métodos nativos podes usar o classList assim:

var linha = '<li id= "id1" class="c1"> ' +
    '<div id="id2">1</div>' +
    '<div id="id3">2</div></li>'
var temp = document.createElement('div');
temp.innerHTML = linha;
temp.querySelector('#id1').classList.add('c2');
document.body.innerHTML = temp.innerHTML;

jsFiddle: http://jsfiddle.net/9p37Lff1/1/

3
  • Estou a tentar fazer com o 1º exemplo que me proporcionaste. Assim quando eu atribuo a class c2 eu atribuo-o à var. Não o consigo atribuir tendo em conta o id da li? 17/06/2015 às 11:40
  • @msm.oliveira no primeiro exemplo $linha é o próprio elemento li, dentro de um objeto do jQuery. Não precisas selecionar nada... Acho que precisas mostrar mais código do que estás a fazer. Usa o meu jsFiddle e completa-o para mostrar o teu problema, senão vai ser dificil perceber o que te está a falhar, pois como vês no jsFiddle funciona bem.
    – Sergio
    17/06/2015 às 11:42
  • 1
    Já consegui resolver o problema. A sua solução ajudou bastante. Vou aceitar como resposta 17/06/2015 às 12:56
4

O problema é que sua variável linha não está adicionada ao document para que você possa fazer a seleção através de document.getElementById('id1'), então para resolver isso sem a utilização de jQuery, você deve adicionar a variável linha a um DOM, no caso pode ser um DOM virtual:

var linha = '<li id= "id1" class="c1"> ' +
  '<div id="id2">1</div>' +
  '<div id="id3">2</div></li>';

// cria dom virtual
var domVirtual = document.createElement("span");
// adicionar string html ao domVirtual, tornado-a um elemento html de fato
domVirtual.innerHTML = linha;
// seleciona elemento no dom virtual por id
var id1 = domVirtual.querySelector("#id1");
// adiciona class ao elemento
id1.classList.add("c2");

console.log(id1.className)

// agora aqui sua variavel id1, já está com o elemento pronto para ser utilizado.

Exemplo jsFiddle.

Outro problema em seu código é que não há o método addClass na interface Element, onde você pode utilizar para essa finalidade o método classList (que é readonly), utilizando então o método add() do classList, sendo representado por essa parte do código apresentado anteriormente:

// adiciona class ao elemento
id1.classList.add("c2");
2

Complementando a resposta do @Sergio, não precisa selecionar por id pois quando você passa uma string com html para o jquery, como está a utilizar, o mesmo mantém como seleção todos os elementos root (no caso, apenas a li que você deseja).

Caso você tenha mais li's na string, pode utilizar o método filter, ou ainda, se o que você quer está em elementos de nível mais baixo, pode utilizar o find.

var $linha = $("<li id='id1'>li a ser selecionada</li>" +
               "<li id='id2'>li não selecionada</li>");
$linha.filter("#id1").addClass("c2");

var $linha = $("<div id='container'>" +
                   "<li id='id1'>li a ser selecionada</li>" +
                   "<li id='id2'>li não selecionada</li>" +
               "</div>");
$linha.find("#id1").addClass("c2");

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 .