javascript - jquery奇怪地解析自定义标签

Question

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

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

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

$('[blah]')...

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

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

2 回答 2