jQuery沒有檢測到我的選擇器中的任何東西

Question

我正在做一個擴展。我在我的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" 
    } 
} 

但是，當這個運行時，它不會做任何事情。當我把代碼alert(elems2.length)發現問題時，它返回0，因此JQuery沒有檢測到它。有誰知道如何解決這一問題？任何幫助，將不勝感激。

Answer 1

如果使用屬性「包含」選擇（https://api.jquery.com/attribute-contains-selector/）你不需要添加選擇「開頭」。

I.e.使用：$("div[id*='ad']")

此外，我不知道你是如何加載你的jQuery，但要確保你在'load'事件中包含var的定義。

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>

Answer 2

當文檔未準備好時，您正在初始化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; 
};