css does not work with div added with append

Question

css does not work with div added with append

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I have a list and I add the elements with the jquery append, and the elements of the list do not capture the css of my styles file, it simply ignores. Why?

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>'
 );

It just looks like this:

javascript html jquery css

asked by anonymous 10.12.2017 / 15:52

4 answers

Separate an array of JSON into columns and rows How to do a multiple definition of variables in VB.Net

score 1 · Answer 1

1

You referenced ul 2 times #list_arquivos ul li

#list_arquivos li is enough ...

10.12.2017 / 15:57

score 1 · Answer 2

So friend, coming here to answer your question, what just happened is that you used the id #list_arquivos right? So make sure you already have the cluttered list already declared. Then when you created it in your CSS code.

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

Make sure you are declaring #list_arquivos and soon after ul . That is, you do not need to declare the unordered list 2 times, right?

How would you look then?

Example:

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

That's because you created an id inside your ul - so make sure to use or ul or #list-arquivos .

Well, I hope I have helped you. If you have any questions, you can return to ask again that I will do my best to respond.

score 0 · Answer 3

Sure, I understand, see a small mistake that the developers comment on is to completely forget to put in your html document the script and the example link:

for css we use:

1- // here you will specify your file in css so that it can connect to the file

2 - // we can only do something with jquery if this script is inside the head tag of our html document, here you can copy and paste in your document if you have not done so ..

3 - // In this last example is how it will behave inside your html document and you follow these explanations if something is wrong with your statements.

something

Well, once again I hope I can help you as much as possible ...

att: Rafael Macedo

score 0 · Answer 4

Brother arrived in the same problem as yours and I believe I have found a solution, see if it makes sense to you.

In case the element li within list_arquivos was created via javascript I think the style should be done in the same way,

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

For me it worked, I hope to have help. Any questions have a look here link

See you soon!