web-dev-qa-db-fra.com

Comment trouver des éléments <script> avec une valeur particulière de l'attribut "type"?

En supposant la balise de script suivante dans un document HTML aléatoire:

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

quelqu'un peut-il expliquer pourquoi l'expression suivante ne trouve pas tous les éléments de script avec la valeur store pour leur attribut type.

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

version jQuery: v1.7.2 Version Chrome: 25.0.1364.172 (s'exécutant sur Debian Squeeze)

jqueryjquery-selectorsdom-traversal
8
0xC0DEGURU

Votre sélecteur $('#target script[type="store"]') fera correspondre toute balise de script de type store qui est un enfant de l'élément avec id target. Ce qui n'est pas le cas pour votre exemple HTML.

Si vous souhaitez sélectionner toutes les balises de script de type store, votre sélecteur doit ressembler à ceci: $('script[type="store"]').

Si vous souhaitez uniquement sélectionner la balise de script particulière portant id target, vous pouvez utiliser uniquement $('#target'). Il n'est pas nécessaire d'être plus spécifique car l'ID doit être unique pour cet élément. Utiliser uniquement le sélecteur d'identifiant serait également plus efficace, car jQuery pourrait alors utiliser la fonction native document.getElementById() pour sélectionner votre élément (une micro-optimisation peut-être, mais quand même ...)

10
Christofer Eliasson

Parce que ce que vous avez écrit signifie: recherchez chaque élément script avec un attribut type égal à store et étant un descendant de #target (à cause de l'espace).

Vous pourriez faire quelque chose comme:

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

mais cela est inutile, car un identifiant identifie déjà un élément - aucun élément d'un document ne peut partager le même identifiant .

Si je comprends bien votre description, il vous faut:

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

Une dernière chose: vous ne devez pas utiliser l'attribut type pour cela. Il a un but très spécifique :

L'attribut type donne la langue du script ou le format des données. Si l'attribut est présent, sa valeur doit être un type MIME valide. Le paramètre charset ne doit pas être spécifié. La valeur par défaut, utilisée si l'attribut est absent, est "text/javascript".

Je vous suggère donc d'utiliser data-type au lieu de type.

6
kapa

Utilisez ceci

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

Tu en as besoin -

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

tu as besoin de faire

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

Dans ce sélecteur, vous recherchez une balise de script avec type = "store" dans la balise de script. Tu devrais essayer:

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

Explication la plus courte possible:

Vous essayez de cibler le script enfant de #target.

Par exemple, si votre marge était à l'effet de ...

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

... votre sélection jQuery fonctionnerait.

Pour sélectionner TOUS les éléments de script avec le type d'une certaine valeur, procédez comme suit: 

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

Pour sélectionner un script spécifique ayant également un identifiant, procédez comme suit: 

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

On peut aussi cibler le script en cours d'exécution sans identifiants: 

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

Ce que vous allez réaliser lorsque vous exécutez ce code, c'est que le premier script se ciblera lui-même et sera affiché sur la console, ainsi que le script final dans le document avec le commentaire // The event will target me :(.

La raison en est qu’en dehors de l’événement, le dernier élément à ajouter au DOM est la balise de script exécutant les instructions, ce qui signifie logiquement que c’est la dernière balise de script dans $('script').

Toutefois, à l'intérieur de l'événement, dans ce cas, document.on('ready'), attend que le chargement du DOM soit terminé, de sorte que toutes les balises de script supplémentaires pouvant exister dans le document soient chargées et remplacent la cible .last() souhaitée.

0
RedYetiCo