jQuery从骨干的脚本标签中选择标记

Question

我正在使用Backbone.js,模板在脚本标签内.我有一个插件,它使用jQuery选择器迭代所有输入字段.它没有获取脚本标记内的输入.

任何想法是如何从脚本标签内定义的html获取属性？

谢谢!

Answer 1

<script>就DOM而言,元素本质上是黑盒子,它们只保存DOM不关心的数据(具体来说,它们包含不可替换的字符数据,而不是标记).所以,如果你这样做$('input'),你不会找到的<input>是在s <script>的元素,因为,没有任何<input>内部元素<script>S,只是字符数据包含的字符序列(即字符串)'<', 'i', 'n', 'p', 'u', 't', ....

例如,如果您有此HTML:

<div></div>
<script id="tmpl" type="text/x-underscore-template">
    <input name="{{name}}">
</script>?

然后这个:

console.log('divs: ' + $('div').length);
console.log('inputs: ' + $('input').length);

会告诉你,有一个<div>零和零<input>,它会说实话.如果您需要查看内部<script>,您必须手动将该字符数据转换为HTML,例如:

var $inputs_in_script = $($('#tmpl').html()).filter('input');

长度$inputs_in_script将是一个.

演示:http://jsfiddle.net/ambiguous/64kjq/

如果您使用<script>模板引擎处理s,那么您必须在模板引擎为您提供的HTML上调用您的插件.然后插件将找到<input>s,因为它们将是真正的<input>元素而不是看起来像<input>元素的字符串.