如何在javascript中动态检查和递增div id？

Question

我有一个使用Longtail Video的JW播放器的视频表。当您单击表中的图像时，视频将以media modal的ID启动。这是我谈论的页面：http：//www.calvaryccm.com/volunteer/featured-ministry。

这是模态的JavaScript：

$(".mediamodal").unbind('click');
$(".mediamodal").click(function () {
    $('.reveal-modal-bg').unbind('click');
    $('.close-reveal-modal').unbind('click');
    $('#mediamodal').remove();
    $('body').append('<div id="mediamodal" class="reveal-modal large" style="width:675px; margin-left:-415px;"><div id="mediaplayer"><script type="text/javascript">SetupMediaPlayer("' + $(this).attr('rel').toLowerCase() + '");</script></div><div id="livepoll_min" style="padding-top:20px;"></div><a class="close-reveal-modal">&#215;</a></div>"');
    $('#mediamodal').reveal({
        animation: 'fadeAndPop',                   //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
    });
    $('.reveal-modal-bg').click(function () {
        $("#mediaplayer").remove();
        socket.disconnect();
    });
    $('.close-reveal-modal').click(function () {
        $("#mediaplayer").remove();
        socket.disconnect();
    });

这在桌面浏览器上效果很好，但在iPad上不可能。我查找了为什么这在Longtail的页面上失败的原因，他们说每个都需要一个独特的Div ID。我意识到这是一个问题，因为我正在生成div onclick。

如何动态更改每个视频的DIV ID？

Answer 1

您只能使用全局计数器：

var hiImACounter = 0;
$(".mediamodal").unbind('click');
$(".mediamodal").click(function () {
    $('.reveal-modal-bg').unbind('click');
    $('.close-reveal-modal').unbind('click');
    $('#mediamodal' + hiImACounter++).remove(); // <--- increment after the operation
    $('body').append('<div id="mediamodal'+hiImACounter+'" class="reveal-modal large" style="width:675px; margin-left:-415px;"><div id="mediaplayer'+hiImACounter+'"><script type="text/javascript">SetupMediaPlayer("' + $(this).attr('rel').toLowerCase() + '");</script></div><div id="livepoll_min" style="padding-top:20px;"></div><a class="close-reveal-modal">&#215;</a></div>"');
    $('#mediamodal'+hiImACounter).reveal({
        animation: 'fadeAndPop',                   //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
    });
    $('.reveal-modal-bg').click(function () {
        $("#mediaplayer"+hiImACounter).remove();
        socket.disconnect();
    });
    $('.close-reveal-modal').click(function () {
        $("#mediaplayer"+hiImACounter).remove();
        socket.disconnect();
    });