Question

我不确定我是否以正确的方式这样做。我有一个表格，我填写的行代表播放列表中的一首歌。现在，我为每行分配一个唯一的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事件，允许用户进行游戏，排序，拖动......这只是感觉我做错了:)？

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的选择器引擎，那么使用引用肯定会更快。

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

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

Answer 2

唯一ID是有意义的，或使用Metadata插件存储与每行相关的所有额外数据。 http://plugins.jquery.com/project/metadata

它将存储如下数据：

<li class='someclass' data="{some:'random', json: 'data'}">...</li>

您可以这样查询：

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

Answer 3

tr是否需要唯一ID或仅仅是通用类，将取决于您打算使用javascript（用于定位行）或css（还用于定位行）的内容。如果您需要专门针对样式或脚本效果定位一行，则唯一ID可以是一种有效的方法。如果没有，那么它可能是额外的“标记”，这是不必要的。

在任何情况下，如果您使用id，请确保它们是唯一的： - ）

Answer 4

jquery可能是这样的：

   var songs = function(songList){
    this.songs = songlist;
    this.init();
    }

    $.extend(songs.prototype, {
      init: function(){
       var self = this;
       var table = $('#myTableID');


       for(var i = 0; i < this.songs.length; i++){
        var song = this.songs[i];
        var songData = $('<tr><td class="track">'+song.track+'</td><td class="artist">'+song.artist + '</td></tr>');
        table.append(songData);
        songData.find('td.track:first')click(function){
         self.SongClick(song.track);
        });
    //add other events here


        }

       }

    },

    SongClick : function(track){
    //add here you click event
    },

    otherEvent : function(track){

//add otherEvent code
}
    });

像这样你可以创建你的javascript对象并在解析它们时直接将事件附加到dom元素。你不需要任何id。这种方法将使用其构造函数创建一个js对象所以你可以说

var so = new songs(mySongList)

初始化时，它将检索列表中id为myTableID和foreach song的表，它会将元素附加到它，并将事件直接附加到这些元素。

jQuery / JavaScript：避免表中每行的唯一ID？

4 个答案: