javascript - 确定javascript函数中的调用div

Question

我有一个 jquery 函数，它返回随机广告的 html。

function getAd() {
    document.write( '<div>Some randomized ad html</div>' );
}

要插入广告，我的 html 文件中有这个:

<div><script>getAd();</script></div>

这行得通，但是，我正在尝试用更安全的代码替换 document.write() 代码，例如 append()。所以我正在尝试这个:

function getAd() {
    $(this).append( '<div>Some randomized ad html</div>' );
}

但是，$(this) 是窗口而不是 div。

我也试过这个:

function getAd(elem) {
    $(elem).append( '<div>Some randomized ad html</div>' );
}

在 html 中，我传递了这个:

<div><script>getAd(this);</script>

但再次强调，$(elem) 是一个窗口而不是 div。 (在这两种情况下，我都会收到“无法读取未定义的属性‘createDocumentFragment’”错误。)

我知道我可以为 div 分配一个 id，然后将 id 传递给 getAd() 函数，但是我在网站上有数百个这样的调用(有时在同一页面上有几个)，我不想这样做每次调用此函数时都必须分配然后传递一个 id。

调用函数是否可以确定调用元素以便附加 html？

谢谢!

Answer 1

您可以为所有元素添加一个公共(public)属性(或一个类):

<div random-ad>

然后，使用 $.each() 调用您的函数:

function getAd(elem) {
    $(elem).append( '<div>Some randomized ad html</div>' );
}

$(document).ready(function(){
    $('[random-ad]').each(function(){
        getAd(this);
    });
});