0

我正在使用允许嵌入 javascript 内容 (Qualtrics) 的外部站点。Qualtrics 动态加载一些控制器。当我通过 Chrome 网络面板测试访问这些控制器时，在它们完全加载后，我可以在代表当前 DOM 的元素窗口中看到加载的控制器。但是，我无法通过 id 访问这些元素，无论是使用 jQuery 还是通过 document.getElementById。

其中一个控制器具有 id 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;​">​&lt;/div>​, 
  <div id=​"QID15~1~handle" class=​"handle selected" style=​"left:​ 0px;​">​&lt;/div>​, 
  <div id=​"QID15~2~handle" class=​"handle selected" style=​"left:​ 0px;​">​&lt;/div>​
]

什么可以阻止我通过 id 访问这些元素？

4

3 回答 3

7

QID12~14~handle不是一个有效的选择器（尽管它是一个有效的id属性），因为~, 它们是同级选择器。您可以使用 id 属性本身解决此问题：

[id='QID12~14~handle']

或者您可以使用反斜杠转义选择器（这也适用于querySelector）：

QID12\\~14\\~handle

根据您使用的 API，您可能还需要#指明 ID 选择器。

于 2013-12-06T03:06:43.537 回答
4

对不起，我意识到我有一个更简单的问题。波浪号 (~) 字符必须在 jQuery 中转义。此查询返回正确的元素：

jQuery("#QID12\\~14\\~handle")
于 2013-12-06T03:06:42.467 回答
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
于 2013-12-06T03:18:24.500 回答