javascript - jQuery/JavaScript:为表中的每一行避免唯一的ID？

我不确定我是否以正确的方式进行操作。我有一张桌子，上面各行代表一个播放列表中的歌曲。现在，我为每行分配一个唯一的ID，并为每个ID分配som 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事件，允许用户播放，排序，拖动等...感觉就像我做错了:)？

最佳答案

您可以在循环中存储对每个生成的行的引用（假设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的选择器引擎，绝对可以更快地使用引用。

另外，如果将相同的单击处理程序附加到每一行，最好将一个附加到表并委托它，例如

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