javascript - jQuery从主干中选择脚本标签内的标记

Question

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

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

谢谢！

Answer 1

<script>就 DOM 而言，元素本质上是黑盒子，它们只保存 DOM 不关心的数据（具体来说，它们保存不可替换的字符数据，而不是标记）。因此，如果您这样做$('input')，您将找不到元素内部的 s，因为 s 内部没有任何元素<input>，<script>只有包含字符序列的字符数据（即字符串）。<input><script>'<', '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);

会告诉你有 1<div>和 0 <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>元素的字符串。