jQuery没有检测到我的选择器的任何东西 [英] jQuery not detecting anything from my selector

问题描述

我正在做一个扩展。我在 content.js 中有以下代码：

  var elems2 = $（div [id ^ ='ad  - ']，div [id * ='ad  - ']）; console.log（elems2.length）; $（窗口）.on（'load'，function（）{for（var i = 0，max = elems2.length; i  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>< div id = adContent-borderstyle =border-color：rgb（229，229，229）; border-radius：0px; border-style：solid; border-width：1px; po sition：绝对的; top：0px; left：0px;宽度：100％;身高：100％; z-index：500;盒子尺寸：边框; pointer-events：none;>< / div>  

manifest.json ：

$ b

  {
manifest_version：2，
name：Test，
description：基本程序，
version：0.1，
background：{
scripts：[
 
] 
}，
content_scripts：[
 {
 matches：[
< all_urls>
]，
js：[
jquery-3.2.1.min.js，
 content.js
] 
} 
]，
 
browser_action：{
default_title：Test
} 
} 
  

但是当它运行时，它什么也不做。我把代码 alert（elems2.length）返回0，因此JQuery没有检测到它。有谁知道如何解决这个问题？任何帮助将不胜感激。

解决方案

如果您使用属性包含'选择器（ https://api.jquery.com/attribute-contains-selector/ ）你不需要添加'starts with'选择器。

Ie使用： $（div [id * ='ad']）

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

Ie

$ $ $ $ $ $ $ $ $ $（$）$ '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>以'ad'开始< / div> < div id =edvert>不以ad开头< / div> < div id =madonna>包含'ad'< / div> < div id =maronna>不包含'ad'< / div> < div id =rad>以'ad'结尾< / div> < div id =raz>不以'ad'结尾< / div>< / div>  

I am making an extension. I have the following code in my 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>

My 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"
  }
}

But when this runs, it does not do anything. I found the problem when I put the code alert(elems2.length) and it returned 0, Therefore JQuery didn't detect it. Does anyone know how to fix this? Any help would be appreciated.

解决方案

If you use the attribute 'contains' selector (https://api.jquery.com/attribute-contains-selector/) you don't need to add the 'starts with' selector.

I.e. use: $("div[id*='ad']")

Also, I am not sure how you are loading your jquery but make sure you include your definition of the var inside the 'load' event.

I.e.

$(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>

这篇关于jQuery没有检测到我的选择器的任何东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！