jQuery没有检测到选择器中的任何内容

时间:2017-04-19 06:33:38

标签: javascript jquery google-chrome-extension

我正在进行扩展。我在istream::get

中有以下代码

content.js
var elems2 = $("div[id^='ad-'],div[id*=' ad-']");

console.log(elems2.length);

$(window).on('load', function() {
    for (var i = 0, max = elems2.length; i < max; i++) {
        elems2.hidden = true;
    };
});

$(document).ready(function() {
    for (var i = 0, max = elems2.length; i < max; i++) {
        elems2.hidden = true;
    };
});

for (var i = 0, max = elems2.length; i < max; i++) {
    elems2.hidden = true;
};

我的<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="adContent-border" style="border-color: rgb(229, 229, 229); border-radius: 0px; border-style: solid; border-width: 1px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 500; box-sizing: border-box; pointer-events: none;"></div>

manifest.json

但是当它运行时,它什么都不做。当我放入代码{ "manifest_version":2, "name":"Test", "description":"A Basic program", "version":"0.1", "background":{ "scripts":[ ] }, "content_scripts":[ { "matches":[ "<all_urls>" ], "js":[ "jquery-3.2.1.min.js", "content.js" ] } ], "browser_action":{ "default_title":"Test" } } 并且它返回0时我发现了问题,因此JQuery没有检测到它。有谁知道如何解决这一问题?任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

当文档未准备好时,您正在初始化elems2 var,这可能导致脚本在您尝试检测的元素已经存在之前执行初始化。

试试这个

var elems2 = null;
$(window).on('load', function() {
    for (var i = 0, max = elems2.length; i < max; i++) {
        elems2.hidden = true;
    };
});

$(document).ready(function() {
    elems2 = $("div[id^='ad-'],div[id*=' ad-']");
    for (var i = 0, max = elems2.length; i < max; i++) {
        elems2.hidden = true;
    };
});

for (var i = 0, max = elems2.length; i < max; i++) {
    elems2.hidden = true;
};

答案 1 :(得分:1)

如果您使用属性'contains'选择器(https://api.jquery.com/attribute-contains-selector/),则无需添加'starts with'选择器。

即。使用:$("div[id*='ad']")

另外,我不确定你是如何加载你的jquery但确保你在'load'事件中包含var的定义。

即。

$(window).load(function() {
    var elem2 = $("div[id*='ad']");
    ...
 });

$(window).load(function() {
  var elem2 = $("div[id*='ad']");

  $.each(elem2, function(idx, elem) {
    console.log(idx + "-" + $(elem).text());
    $(elem).addClass('with-ad');
  });
});
.with-ad {
  border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my-answer">
  <div id="advert">Starts with 'ad'</div>
  <div id="edvert">Does not starts with 'ad'</div>
  <div id="madonna">Contains 'ad'</div>
  <div id="maronna">Does not contain 'ad'</div>
  <div id="rad">ends in 'ad'</div>
  <div id="raz">does not end in 'ad'</div>
</div>