【jquery】scriptタグの要素は find では見つかるが children では見つからない

luck

5年前

言いたいこと

childrenでうまく取得できない場合はfindを使いましょう。

下記のパターンで気付いた

<div class="parents">
    <div class="child">
        <script src="js/sample.js"></script>
    </div>
    <script>
    // ここの処理のテキストを取得したい
    </script>
</div>

「// ここの処理のテキストを取得したい」の部分を取得したい。

scriptタグの要素 find では見つかる

$('.parents').find('script').each(function() {
    console.log($(this).html());
});

結果は2つ取得できます。
空文字と「// ここの処理のテキストを取得したい」の２つです。空文字はsample.jsの方の要素の中身が空のためでしょう。

scriptタグの要素 children では見つからない

ここでほしいのは「// ここの処理のテキストを取得したい」のみですので、子要素のみ取得すればうまくいくと思いました。

console.log($('.parents').children('script').html());

残念ながら何も取得できませんでした。

まとめ

どちらも子要素もしくは子要素と孫要素を取得するので、どちらも取得できそうですが、実際に取れないものは仕方ありません。findで取れるので、そっちで取得すればOKです。

ちなみに検証はFirefoxです。