jquery奇怪地解析自定义标签答案

【问题标题】：jquery parsing custom tags strangelyjquery奇怪地解析自定义标签
【发布时间】：2011-09-01 00:36:18
【问题描述】：

我正在尝试使用 jQuery 1.6 解析自定义标签。它工作正常，除非标签位于<select> 标签内。例如：

var string = '<div><blah></blah><select><blah></blah></select></div>';

$(string).find('blah').each(function() {
    console.log("Found tag!");
});

这只会记录一条消息，尽管存在两个<blah> 标签。 <select> 中的第二个 <blah> 标记将无法识别。有谁知道为什么会发生这种情况？

【问题讨论】：

【解决方案1】：

问题在于进行解析的不是 JavaScript 或 jQuery，而是浏览器。虽然你可能认为<select>标签是你自己的自定义交易，但浏览器不同意并希望它只包含<option>或<optgroup>标签。

当你像这样通过 jQuery 包装字符串时，内部发生的事情是 jQuery 将字符串作为临时元素的“innerHTML”交给浏览器。浏览器希望它可以处理 HTML，因此当它看到非法标记时，它基本上会随心所欲地处理它。也许有些浏览器会单独留下<blah> 标签，但其他浏览器不会。

【讨论】：

【解决方案2】：

作为使用无效 HTML 的替代方法，使用自定义属性来标记标签或存储数据，例如

<div><span blah></span><select blah></select></div>

然后就可以使用属性选择器了：

$('[blah]')...

您也可以使用data-something="my data"等HTML5样式属性，并使用$.data直接获取值。

由于非标准标签的内容可能无论如何都会被渲染，这样做与仅使用带有自定义属性的跨度标签没有区别。我不确定您要使用选项组中的自定义标签来准确实现什么，但我认为您不希望它被呈现，因此选择或特定选项上的自定义标签可能会实现你的目标。

【讨论】：