How to find <script> elements with particular value of "type" attribute?

Question

Assuming the following script tag in a random HTML document:

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

can anybody explain why the following expression doesn't find all elements of script with value store for their type attribute.

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

jQuery version: v1.7.2 Chrome version: 25.0.1364.172 (running on Debian Squeeze)

Answer 1

Your selector $('#target script[type="store"]') would match any script tag with type store that is a child of the element with id target. Which isn't the case for your example HTML.

If you want to select all script tags with type store, your selector should look something like this: $('script[type="store"]').

If you only want to select the particular script tag that has id target, you could use $('#target') only. No need to be more specific as the ID should be unique to that element. Using only the ID selector would be more efficient as well, since jQuery then could utilize the native document.getElementById() to select your element (a micro-optimization perhaps, but still...)

Answer 2

Because what you wrote means: find every script element with an attribute type being equal to store and being a descendant of #target (because of the space).

You could do something like:

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

but this is unnecessary, because an ID already identifies an element - no elements in a document can share the same ID.

If I understand your description well, what you need is:

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

One more thing: you should not use the type attribute for this. It has a very specific purpose:

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

So I suggest you use data-type instead of type.

Answer 3

You need this -

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

Answer 4

you need to do

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

Answer 5

In this selector you are looking for script tag with type="store" inside script tag. You should try:

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

Answer 6

Use this

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

Answer 7

Shortest explanation possible:

You're attempting to target the child script of #target.

For instance, if your markup were to the effect of...

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

...your jQuery selection would work.

To select ALL script elements with type of certain value do:

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

To select a specific script that has an ID as well, do:

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

One can also target the script being executed without identifiers:

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

What you will realize when you run this code, is that the first script will target itself, and output to console, as well as target the final script in the document with the // The event will target me :( comment.

The reason for this is that outside the event, the last element to be added to the DOM is the script tag executing the instructions, which means logically its the last script tag in $('script').

However, inside the event, in this case document.on('ready'), waits until the DOM has finished loading, so that any additional script tags that may exist in the document will be loaded and would replace the desired .last() target.