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をどのように読み込んでいるのかよく分かりませんが、varの定義を 'load'イベントに含めるようにしてください。

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; 
};