web-dev-qa-db-ja.com

「type」属性の特定の値を持つ<script>要素を見つける方法は？

ランダムなHTMLドキュメントで次のスクリプトタグを想定します。

<script id="target" type="store">
    //random JavaScript code
    function foo(){
       alert("foo");
    }
    foo();
</script>

次の式で、script属性に値storeを持つtypeのすべての要素が見つからない理由を誰かが説明できますか。

var sel = $('#target script[type="store"]');

jQueryバージョン：v1.7.2 Chromeバージョン：25.0.1364.172（Debian Squeezeで実行）

jqueryjquery-selectorsdom-traversal
9
0xC0DEGURU

セレクター$('#target script[type="store"]')は、IDがstoreの要素の子であるタイプtargetのスクリプトタグと一致します。これは、サンプルHTMLには当てはまりません。

タイプがstoreのすべてのスクリプトタグを選択する場合、セレクターは次のようになります：$('script[type="store"]')。

IDがtargetの特定のスクリプトタグのみを選択する場合は、$('#target')のみを使用できます。 IDはその要素に固有である必要があるため、より具体的にする必要はありません。 jQueryはネイティブのdocument.getElementById()を利用して要素を選択できるため、IDセレクターのみを使用する方が効率的です（マイクロ最適化かもしれませんが、それでも...）

11
Christofer Eliasson

あなたが書いたものが意味するので：属性scriptがtypeに等しく、の子孫であるすべてのstore要素を見つけてください#target（スペースのため）。

あなたは次のようなことをすることができます：

var sel = $('script#target[type="store"]');

ただし、IDはすでに要素を識別しているため、これは不要です-ドキュメント内のどの要素も同じIDを共有できません。

私があなたの説明をよく理解しているなら、あなたが必要とするのは：

var sel = $('script[type="store"]');

もう1つ、これにはtype属性を使用しないでください。 非常に特定の目的があります ：

Type属性は、スクリプトの言語またはデータの形式を示します。属性が存在する場合、その値は有効なMIMEタイプである必要があります。 charsetパラメーターは指定しないでください。属性が存在しない場合に使用されるデフォルトは「text/javascript」です。

したがって、typeの代わりにdata-typeを使用することをお勧めします。

6
kapa

これを使って

var sel = $('script#target[type="store"]');
1
pvnarula

あなたはこれを必要とします -

var sel = $('#target[type="store"]');
1
Mohammad Adil

あなたがする必要があります

var sel = $('script#target[type="store"]');
1
Suresh Atta

このセレクターでは、スクリプトタグ内にtype = "store"が含まれるスクリプトタグを探しています。試してみてください：

$('script#target[type="store"]');
1
Daniel Dykszak

可能な限り短い説明：

#targetの子スクリプトをターゲットにしようとしています。

たとえば、マークアップの効果が...

<div id="target"><script type="store"></script></div>

... jQueryの選択は機能します。

特定の値のタイプを持つすべてのスクリプト要素を選択するには：

$('script[type="value"]')

IDを持つ特定のスクリプトを選択するには、次のようにします：

$('script#id[type="value"]')

識別子なしで実行されているスクリプトをターゲットにすることもできます：

<script>
  // Prevent Global Scope Pollution
  (function($){

    // DO - Use it outside of an event...
    var Script_Self = $('script').last();
    console.log(Script_Self);

    // DONT - Use it inside of an event...
    $(document).on('ready', function() {
      var Script_Self = $('script').last();
      console.log(Script_Self);
    });

  })(jQuery);
</script>

<script>
  // Prevent Global Scope Pollution
  (function($){

    // The event will target me :(

  })(jQuery);
</script>

このコードを実行すると、最初のスクリプトがそれ自体をターゲットにしてコンソールに出力し、// The event will target me :(コメントを使用してドキュメントの最後のスクリプトをターゲットにすることがわかります。

これは、イベントの外部で、DOMに追加される最後の要素が、命令を実行するスクリプトタグであるためです。これは、論理的には$('script')の最後のスクリプトタグを意味します。

ただし、イベント内（この場合はdocument.on('ready')）は、DOMの読み込みが完了するまで待機するため、ドキュメントに存在する可能性のある追加のスクリプトタグが読み込まれ、目的の.last()が置き換えられます。目標。

0
RedYetiCo