我正在使用允许嵌入式javascript内容(Qualtrics)的外部网站。 Qualtrics动态加载一些控制器。当我通过Chrome网络面板测试访问这些控制器时,在完全加载后,我可以在Elements窗口中看到加载的控制器,它代表当前的DOM。但是,我无法使用jQuery或通过document.getElementById访问这些元素。
其中一个控制器的标识为QID12~14~handle
。在Elements DOM浏览器中,我看到了标记:
<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>
当我查看页面的源代码时,我发现它们是动态加载的,并通过脚本标记插入到页面中:
<div class='QuestionBody BorderColor'>
<div class='horizontalbar ChoiceStructure RtlOverride'></div>
<div id='debug'></div>
<!-- This has to be called after the html it references. Thats why its down here -->
<script type='text/javascript'>
QModules.loadExternalModule('../WRQualtricsShared/JavaScript/CSBar/slider.51487.js', function () {
(function () {
CS_QID15 = new CSBar('0', '100', '10', 'QID15', '');
if (CS_QID15.loaded) {
CS_QID15.setDecimals(0);
if (CS_QID15.snapToGrid) {
CS_QID15.makeSlider('QID15~1');
CS_QID15.makeSlider('QID15~2');
CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
}
else {
CS_QID15.makeSlider('QID15~1');
CS_QID15.makeSlider('QID15~2');
CS_QID15.setStartPositions({"1": 0, "2": 0, "3": 0.64599483204134});
}
}
}).delay(); //if ie is waiting for something and this loads too fast it breaks. the defer fixes a very esoteric bug.
});
</script>
<div class='clear zero'></div>
</div>
该网页未使用iFrame。如果我在当前DOM中看到一个id,为什么我不能通过它的id访问它,因为它当前存在于DOM中?
如果我致电jQuery(".handle")
,我会看到这个元素:
[
<div id="QID12~14~handle" class="handle selected" style="left: 122px;"></div>,
<div id="QID15~1~handle" class="handle selected" style="left: 0px;"></div>,
<div id="QID15~2~handle" class="handle selected" style="left: 0px;"></div>
]
什么阻止我通过id访问这些元素?
答案 0 :(得分:7)
QID12~14~handle
不是有效的选择器(尽管它是有效的id
属性),因为~
是兄弟选择器。你可以使用id属性本身解决这个问题:
[id='QID12~14~handle']
或者您可以使用反斜杠转义选择器(这也适用于querySelector
):
QID12\\~14\\~handle
您可能还需要#
来指明ID选择器,具体取决于您使用的API。
答案 1 :(得分:4)
抱歉,我意识到我有一个更简单的问题。必须在jQuery中转义波浪号(〜)字符。此查询返回正确的元素:
jQuery("#QID12\\~14\\~handle")
答案 2 :(得分:2)
id中的波浪号似乎是个问题。
你需要使用像这样的双反斜杠来转义特殊字符。
$("#QID15\\~1")
我刚刚在控制台中尝试了以下操作
//add element for testing
$('body').append('<div id="QID15~1"></div>');
$("#QID15~1")
//returned a blank array
$("#QID15\\~1")
//returned the div as expected