javascript - jQuery/JavaScript : Avoid unique ID's for each row in a table?

Question

我不确定我这样做是否正确。我有一个表格，其中填充了行，每行代表播放列表中的一首歌曲。现在，我为每行分配一个唯一的 ID，并为每个 ID 分配一些 jQuery.data()。

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

如您所见，每一行都有一个 ID，如 track-1、track-2 等。

是否有另一种方法可以填充这样的播放列表，而无需为每个轨道分配唯一的 ID，或者这是应该如何完成的？每个轨道都有一些如下属性:

        $("#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);

...还有每个轨道的 .click 事件，它允许用户播放、排序、拖动等...只是感觉我做错了:)？

Answer 1

您可以存储对循环中每个生成行的引用(假设 html 仅包含单行的 HTML):

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(){...});

元素有一个 ID 也不错。但如果您有一个引用并且不一遍又一遍地使用 jQuery 的选择器引擎，那么使用引用肯定会更快。

此外，如果您将相同的点击处理程序附加到每一行，最好将一个附加到表格并委托(delegate)它，例如

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