Change CSS properties using jQuery

Question

I am trying to modify a UL image in a CSS folder using jQuery. This is for the Twitter stream, where the account image of the account changes along with the tweet. The usage is .csspretty straight forward, but I'm trying to change the URL for a new image.

Here is my client code:

$(document).ready(function(){
    var socket = io();

    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });

    socket.on('info', function(data){
        console.log("this is teh question" + " " + data);
        $("#tweets").prepend("<li>" + data + "</li>");
    });

    socket.on('reply', function(data){
        console.log("this is my reply" + " " + data);
        $("#messages").prepend("<li>" + data + "</li>");
    });

    socket.on('userPic', function(data) {
        console.log("the userPic: " + data);
        $("ul#tweets").css("list-style-image: url", data);
    });
});

And CSS:

body {
    font: 13px Helvetica, Arial;
    max-width: 1250px;
    width: 100%;
    margin: auto;
}

form {
    background: #fff;
    padding: 10px;
    width: calc(100% - 20px);
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

form input {
    border: 3px inset;
    padding: 7px 5px;
    width: calc(100% - 140px);
    margin-right: 10px;
    display: inline-block;
    font-size: 15px;
}

form button {
    width: 110px;
    background: #177cc1;
    color: #fff;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 22px;
    border: none;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
}

form button:hover {
    background: #177cee;
}

form button:active {
    background: #177caa;
}

form button:focus {
    outline: 0;
}

.container {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 20px;
    margin: 5px 10px 20px;
    background: #222;
}

.content {
    display: inline-block;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #555;
    border: 1px solid #555;
}

.tweets_container {
    display: inline-block;
    width: 100%;
    background: #fff;
}

.header {
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #333;
    padding: 15px;
}

#messages, #tweets {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    width: calc(50% - 32px);
}

#tweets li, #messages li {
    padding: 10px;
    font-size: 18px;
}

#messages {
    background: #444;
    color: #fff;
}

ul#tweets {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

ul#messages {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

#tweets {
    background: #fff;
    color: #333;
}

.footer {
}

Answer 1

I believe in it:

$("ul#tweets").css("list-style-image: url", data);

should be changed to:

$("ul#tweets").css("list-style-image", "url('"+data+"')");

Answer 2

Without looking at your nodejs and socket.io, check if the socket.on('userPic', function(data) {userPic event occurs. If so, check to see if a value is valid datafor this scenario.

list-style-image , URL- list-style-image:url(''), , , .

Answer 3

css , JS , . , , ( , , )...

$('.image').css(
    'background-image', 
    'url("http://lorempixel.com/400/200/sports/")'
);

- , :

$('.image').css(
    'background-image', 
    'url("' + data + '")'
);

, css. , . , , - , ​​ , :

.css('width', number); // wrong
.css('width', number + '%'); // right