0

JavaScript コンテンツの埋め込みを許可する外部サイト (Qualtrics) を使用しています。Qualtrics は一部のコントローラーを動的にロードします。これらのコントローラーへのアクセスを Chrome Web パネルからテストすると、コントローラーが完全にロードされた後、現在の DOM を表す [Elements] ウィンドウに、ロードされたコントローラーが表示されます。ただし、jQuery または document.getElementById を使用して、ID でこれらの要素にアクセスすることはできません。

コントローラーの 1 つに 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 が表示されている場合、現在 DOM に存在する ID でアクセスできないのはなぜですか?

を呼び出すと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 に答える