Как найти элементы с определенным значением атрибута "type"?

предполагая следующий тег скрипта в случайном HTML-документе:

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

может ли кто-нибудь объяснить, почему следующее выражение не находит всех элементов script со значением store их .

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

версия jQuery: v1.7.2 Версия Chrome: 25.0.1364.172 (работает на Debian Squeeze)

8
dom-traversal jquery jquery-selectors

7 ответов

ваш селектор $('#target script[type="store"]') будет соответствовать любому тегу скрипта с типом store это дочерний элемент элемента с id target. Что не относится к вашему примеру HTML.

если вы хотите выбрать все теги скрипт типа store, ваш селектор должен выглядеть примерно так: $('script[type="store"]').

если вы только хотите выбрать конкретный тег script, который содержит ID target, вы могли бы использовать $('#target') только. Нет необходимости быть более конкретным, поскольку идентификатор должен быть уникальным для этого элемента. Использование только селектора ID было бы более эффективным, так как jQuery тогда мог бы использовать родной document.getElementById() чтобы выбрать свой элемент (возможно, микро-оптимизация, но все же...)

10

потому что то, что вы написали, означает: найти все script элемент с атрибутом type равна store и потомок of #target (из-за пространства).

вы могли бы сделать что-то вроде:

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

но это не нужно, потому что идентификатор уже идентифицирует элемент -никакие элементы в документе не могут использовать один и тот же ID.

если я хорошо понимаю ваше описание, что вам нужно есть:

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

еще одна вещь: вы не должны использовать для этого. он имеет очень конкретную цель:

атрибут type дает язык скрипта или формат данные. Если атрибут присутствует, его значение должно быть допустимым MIME тип. Параметр charset не должен быть указан. По умолчанию, используется, если атрибут отсутствует, это "text / javascript".

поэтому я предлагаю вам использовать data-type вместо type.

6

вам нужно это -

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

вам нужно 

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

в этом селекторе вы ищете тег скрипта с типом= "store" внутри тега скрипта. Вы должны попробовать:

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

использовать

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

самое короткое возможное объяснение:

вы пытаетесь нацелиться на дочерний скрипт #target.

например, если ваша разметка имела эффект...

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

...ваш выбор jQuery будет работать.

чтобы выбрать все элементы скрипта с типом определенного значения, выполните:

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

чтобы выбрать конкретный скрипт, который также имеет идентификатор, do:

$('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