jQuery 如何查找具有“type”属性特定值的 <script> 元素?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16984049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find <script> elements with particular value of "type" attribute?
提问by 0xC0DEGURU
Assuming the following script tag in a random HTML document:
假设随机 HTML 文档中有以下脚本标签:
<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.
任何人都可以解释为什么下面的表达式没有找到其属性的所有script
具有值的元素。store
type
var sel = $('#target script[type="store"]');
jQuery version: v1.7.2 Chrome version: 25.0.1364.172 (running on Debian Squeeze)
jQuery 版本:v1.7.2 Chrome 版本:25.0.1364.172(在 Debian Squeeze 上运行)
回答by Christofer Eliasson
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.
您的选择器$('#target script[type="store"]')
将匹配store
具有 id 元素的子元素的type 的任何脚本标记target
。对于您的示例 HTML,情况并非如此。
If you want to select all script tags with type store
, your selector should look something like this: $('script[type="store"]')
.
如果你想选择与类型的所有脚本标记store
,你的选择应该是这个样子:$('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...)
如果您只想选择具有 id 的特定脚本标记,则target
只能使用$('#target')
。无需更具体,因为 ID 对该元素应该是唯一的。仅使用 ID 选择器也会更有效,因为 jQuery 可以利用本机document.getElementById()
来选择您的元素(也许是微优化,但仍然......)
回答by kapa
Because what you wrote means: find every script
element with an attribute type
being equal to store
and being a descendantof #target
(because of the space).
因为你所写的方法:找到每一个script
与属性元素type
等于store
和作为一个后裔的#target
(因为空间)。
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.
但这是不必要的,因为 ID 已经标识了一个元素 -文档中的任何元素都不能共享相同的 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:
还有一件事:您不应该type
为此使用该属性。它有一个非常具体的目的:
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".
type 属性给出了脚本的语言或数据的格式。如果该属性存在,则其值必须是有效的 MIME 类型。不得指定字符集参数。如果属性不存在,则使用的默认值是“text/javascript”。
So I suggest you use data-type
instead of type
.
所以我建议你使用data-type
而不是type
.
回答by Daniel Dykszak
In this selector you are looking for script tag with type="store" inside script tag. You should try:
在这个选择器中,您正在寻找在脚本标签中带有 type="store" 的脚本标签。你应该试试:
$('script#target[type="store"]');
回答by pvnarula
Use this
用这个
var sel = $('script#target[type="store"]');
回答by Mohammad Adil
You need this -
你需要这个 -
var sel = $('#target[type="store"]');
回答by Suresh Atta
you need to do
你需要做
var sel = $('script#target[type="store"]');
回答by RedYetiCo
Shortest explanation possible:
可能的最短解释:
You're attempting to target the child script of #target
.
您正在尝试定位#target
.
For instance, if your markup were to the effect of...
例如,如果您的标记是...
<div id="target"><script type="store"></script></div>
...your jQuery selection would work.
...您的 jQuery 选择会起作用。
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:
要选择一个也有 ID 的特定脚本,请执行以下操作:
$('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 event will target me :(
注释的文档中的最终脚本为目标。
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')
.
这样做的原因是在事件之外,添加到 DOM 的最后一个元素是执行指令的 script 标签,这意味着逻辑上它是$('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.
但是,在这种情况下document.on('ready')
,在事件内部等待 DOM 完成加载,以便加载文档中可能存在的任何其他脚本标记并替换所需的.last()
目标。