Question

我正在创建和附加图像（div）：

$('#event_list_main').append('<img class="listed_event" id="random_event" src="final_tutorial_buttons/random.png" height="50" width="50" onclick="one_band_event_action();" />');

所以每次执行此操作时，前一个图像旁会弹出一个图像，依此类推！问题是我想跟踪这些！

我来到了这个

http://www.webdeveloper.com/forum/showthread.php?t=147935

但我不知道如何实现它。我想到的另一件事是，在“append（）”中传递一个参考号（类似于计数器）像这样：

$('#event_list_main').append('<img class="listed_event" id="random_event <INSERT REFERENCE>" src="final_tutorial_buttons/random.png" height="50" width="50" onclick="one_band_event_action();" />');

但我怎么能通过呢？有逃脱符号吗？

Answer 1

如果您“跟踪这些”意味着您希望能够在多次追加后找到特定图像，则可以使用HTML5数据属性，f.ex：

var i = 0;
$('#event_list_main').append('<img data-count="'+(i++)+'">');

然后访问单个图像，如：

$('#event_list_main').find('img').filter(function() {
    return $(this).data('count') == 1;
});

甚至更好：将它们保存在一个数组中：

var images = [];

// inside the loop:

images.push(
    $('<img>', {
        'src': 'image.jpg',
        'class': 'listed_event' // etc
    }).appendTo('#event_list_main')
);

然后只需通过images数组访问它：

images[2]; // the third image

Answer 2

由于您的新<img>代码都包含id attribute that starts with random_event，因此您无需单独跟踪它们。您可以随时使用该选择器将其取回：

$('#event_list_main').find('img[id^="random_event"]');

上面的选择器可用于查找您需要添加的数量，并使用.each()对其进行迭代，以进行您可能需要的任何其他操作。

为Div分配一个值，以便我可以跟踪它

2 个答案: