Question

I’m not sure if I’m doing this the right way. I have table which I fill with rows that each represent a song in a playlist. Right now, I assign a unique ID per row, and also assign som jQuery.data() to each ID.

        html += '\
            <tr id="track-' + i + '" class="tracks-row"> \
                <td class="track"><a id="play-'+ i +'" class="play"></a><a id="play2-' + i + '">' + song.song_track + '<span class="mix-style">' + song_mix + '</span></a></td> \
                <td class="artist">' + song.song_artist + '</td> \
                <td class="favourites-holder"><a id="favourite-' + i + '" class="favourites"></a></td> \
                ' + delete_holder + ' \
            </tr> \
        ';

So as you can see, each row has an ID like track-1, track-2 etc.

Is there another way to populate a playlist like this without assigning unique ID’s to each track, or is this how it’s supposed to be done? Each track has some properties like this:

        $("#track-" + i).data("song_id", song.song_id);
        $("#track-" + i).data("song_artist", song.song_artist);
        $("#track-" + i).data("song_track", song.song_track);
        $("#track-" + i).data("song_mix", song.song_mix);
        $("#track-" + i).data("ps_id", song.ps_id);

… and also .click events for each track, which allows the user to play, sort, drag etc… It just feels like I’m doing it wrong :)?

Answer 1

You could store a reference to each generated row in your loop (assuming html only contains the HTML for a single row):

var row = $(html).appendTo("#table");
var data = row.data();

data["song_id"] = song.song_id;
data["song_artist"] =  song.song_artist;
data["song_track"] = song.song_track;
data["song_mix"] = song.song_mix;
data["ps_id"] = song.ps_id;

row.click(function(){...});

It is not bad to have an ID for an element. But is definitely faster to make use of a reference if you have one and not use jQuery’s selector engine over and over again.

Also if you attach the same click handler to every row, it is probably better to just attach one to the table and delegate it, e.g.

$('#table').delegate('tr', 'click', function(){...});