使用带有CSS的jQuery ID Selector

Question

I'm actually creating a list with streamers and checking if they're online, if so they'll get a green background color.

Now I want to create an additional list next to my "team list" which includes every streamer.

---

For this I'm trying to use the same method like the one I'm using for the background color.

$(".".concat(user)).css("background-color","lightgrey");

(to color every background color for the streamers)

But now I want to just hide the streamers in one list and not everywhere.

So I can't use this:

$(".".concat(user)).css("display", "none");

(would hide every offline streamer in every list )

---

I already tried to apply the ID but actually I don't know how. If I use this:

$("#online".concat(user)).css("display", "none");

nothing happens.

(I named my ID online)

<tr class="header" id ="online">

(I already tried to apply the id to a new , to the and now to the but nothing works)

---

TL;DR:

I want to hide offline streamers in a new list but I can't use the same ID selector as I used before. How can I do it?

Answer 1

Not much to start with, but if you have a structure like

    <table>
        <tr class="header Peter" id ="onlinePeter">
            <td>Peter</td>
        </tr>
        <tr class="header John" id ="onlineJohn">
            <td>John</td>
        </tr>
        <tr class="header Michael" id ="onlineMichael">
            <td>Michael</td>
        </tr>
        <tr class="header Bob" id ="onlineBob">
            <td>Bob</td>
        </tr>
        <tr class="header Daniel" id ="onlineDaniel">
            <td>Daniel</td>
        </tr>
    </table>

and a script like

var user = "John";
$("#online".concat(user)).css("display", "none");
user = "Daniel"
$(".".concat(user)).css("background","lightgrey");

It works. the row that contains John disappears

On the other piece of code where you try to change the background color, you are calling an element with the class = user, but the HTML you provided only has the class "header", once the class is added, the background changes as well.

Answer 2

I looked at the jsfiddle you linked and got a better understanding of what is happening.

The server returns an empty stream all the time, so the code never goes into the "true" part of the statement. Furthermore, in the "false" part of the statement, the code changes the background color and then hides the table cell.

 function colorize(user){
     $.getJSON('https://api.twitch.tv/kraken/streams/'+user, function(channel) {
         /*
         * Stream always returns as null
         */

         console.log(channel["stream"]); // returns null in all tests
         var data = channel["stream"]; // data == null
         var boolAnswer = ((typeof(data) !== 'undefined') && (data !== null));
         console.log(data);
         if ( boolAnswer === true) {
             $( ".".concat(user) ).css("background-color", "lightgreen");
             /*
             * boolAnswer is always null, so this piece is skipped all the time
             */
         }
         else if ( boolAnswer === false){
             /*
             * First it changes the color and then it hides it
             */
             $(".".concat(user)).css("background-color","lightgrey");
             $(".".concat(user)).css("display", "none");

         }
     }).success(function(response){
         console.log(response);
     });
 }

colorize('jankos'); //hides the cell of jankos
colorize(); // doesn't do anything

if you comment the line that says $(".".concat(user)).css("display", "none");

colorize('jankos'); //changes the color of the cell of jankos  
colorize() // still doesn't do anything