1

Tenho uma lista e nela adiciono os elementos com o append do jquery , e os elementos da lista não capturam o css do meu arquivo de estilos, simplesmente ignora. Porque?

html:

<ul id="list_arquivos"></ul>

css:

#list_arquivos{
    list-style:none;
}

#list_arquivos li{
    display:inline;
    background-color: #0C94C7;
}

Javascript:

$("#list_arquivos").append(
        '<li>' +
                '<div style="border: 1px solid #FAFAFA">' +
                        '<img src="img/file_icons/'+dados.icon+'">' +
                 '</div>' +
                 '<p>'+dados.nome_arquivo+'</p>' +
        '</li>'
 );

Simplesmente fica assim:

inserir a descrição da imagem aqui

4 Respostas 4

1

Você referenciou a ul 2 vezes #list_arquivos ul li

#list_arquivos li já basta...

1
  • O problema é que o css não está se aplicando, de jeito nenhum. Somente com itens staticos que eu adiciono direto no html. Os que adiciono interativamente com o jquery usando append, o css simplesmente não funciona. 10/12/2017 às 18:57
1

Então amigo, vindo aqui responder a sua pergunta, o que acaba de acontecer é que você usou o id #list_arquivos certo? Então certifique que você já tem a list desordenada já declarada. Aí quando você criou no seu código CSS.

#list_arquivos ul li{
    display:inline;
    background-color: #0C94C7;
}

Certifique que você está declarando a #list_arquivos e logo após ul. Ou seja, não precisa declarar a lista desordenada 2 vezes, certo?

Como ficaria então?

Exemplo:

#list_arquivos li{
    display:inline;
    background-color: #0C94C7;
}

Isso porque você criou um id dentro da sua ul - então certifique-se de usar ou a ul ou a #list-arquivos.

Bem, eu espero ter ajudado você. Caso tenha alguma dúvida, pode retornar a perguntar novamente que farei o possível para responder.

2
  • Obrigado por tentar ajudar mas a questão não é essa, eu não tinha percebido é que na hora de copiar para cá mandei errado. A questão é que o css simplesmente não se aplica, entendeu? eu posso colocar um padding de 1000px ou uma cor rosa choque que ela vai continuar do mesmo jeito 10/12/2017 às 18:55
  • editei a pergunta com uma foto de como fica a lista. Fica vertical, e sem nenhuma cor, mesmo colocando inline e background-color e já tentei aplicar outras propriedades e nada 10/12/2017 às 19:03
0

certo eu entendi, veja um pequeno erro que os desenvolvedores comentem é esquecer totalmente de colocar no seu documento html o script e o link exemplo :

para css usamos:

1- //aqui você irá especificar o seu arquivo em css para que ele possa conectar ao arquivo

2-// só podemos fazer algo com o jquery se caso estiver esse script dentro da tag head do nosso documento html, aqui você pode copiar e colar no seu documento caso não tenha feito isso..

3-//nesse ultimo exemplo é como ele irá se comportar dentro do seu documento html ai você segue essas explicações caso esteja algo errado com suas declarações.

something

  • bem mais uma vez espero poder está ajudando na medida do possível ...

att: Rafael Macedo

0

Brother cheguei no mesmo problema que o seu e acredito ter achado uma solução, vê se faz sentido pra ti.

No caso como o elemento li dentro do list_arquivos foi criado via javascript acho que o estilo deveria ser feito da mesma maneira, no caso, logo após o append teria outra linha tipo assim:

$('#lis_arquivos').append('<li>...</li>')
$('#list_arquivos li').css({
      'display': 'inline', 
      'background-color': '#0C94C7'
});

Pra mim funcionou certinho, espero ter ajuda. Qualquer dúvida da uma olhadinha aqui https://poucaslinhas.com.br/manipulacao-de-css-com-jquery/

Até mais!

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 .