web-dev-qa-db-ja.com

シンプルなjQueryセレクターは、Chromeの最初の要素のみを選択します。

私はjQueryを初めて使用するので、密集していることを許します。 ChromeのJSコンソールで特定のページのすべての<td>要素を選択したい：

$('td')

しかし、これを行うと、次の出力が得られます。

<td>Apples</td>

JQueryは<td>タグを持つ要素の配列を返すことになっていないのですか？この基準に一致する最初の要素しか表示されないのはなぜですか？

問題のサイトは次のとおりです。 http://www.w3schools.com/html/html_tables.asp

編集：jQuery関数をChromeコンソールに入力すると、jQueryオブジェクトは返されません。プレーンなHTML要素が返されます。何か問題があるはずです。方法my Chromeはセットアップ/構成されています。

jquerygoogle-chromeweb-scraping
45
fbonetti

JQueryがWebページに存在せず、もちろん他のコードが_$_に何かを割り当てない場合、ChromeのJSコンソールは_$_にdocument.querySelector()へのショートカットを割り当てます。

コンソールで$$()へのショートカットが割り当てられているdocument.querySelectorAll()を使用すると、目的を達成できます。

ページにjQueryが含まれているかどうかを確認するには、コンソールでjQueryを実行します。 jQueryが_$_に割り当てられているかどうかを確認するには、$().jqueryを実行して、jQueryバージョンが返されるようにします。

また、すべてのWebページにjQueryを挿入するブラウザーアドオンがあります。

87
Gras Double

ターゲットページで実行するjQueryが適切に含まれていないようです。 Google Chromeでも同様の問題があり、次のように解決しました。

ChromeブラウザにURLフィールドとして次の1行のコードを含むブックマークを追加します（読みやすくするために美しくしています）：

_javascript: (function () {
    var s = document.createElement('script');
    s.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
    if (typeof jQuery == 'undefined') {
        document.getElementsByTagName('head')[0].appendChild(s);
    }
    jQuery("td.edit select option[value=BN]").attr("selected", "");
})();
_

次に、そのブックマークをクリックして実行します。通常はjQueryを含め、_$_を入力すると、function (e,t){return new b.fn.init(e,t,r)}のようなものを返すようにコンソールを作成する必要があります。

ブックマーク（ブックマークレットとも呼ばれる）を作成するプロセスは、コンソールで作業するすべてのページにjQueryを挿入するための省略形です。ただし、スニペットコードは、JSコンソールに直接コピーアンドペーストしても機能します。

PS：スニペットのクレジットは私のものではありません。しばらく使用していますが、どこから入手したのか覚えていないからです。

それが役に立てば幸い。

15
rdonatoiop

JQueryがインストールされており、_$_シンボルがjQueryの省略形である場合、$('td')はjQueryオブジェクトを返します。しかし、リンクしたw3schoolsページでは、jQueryが存在することすらわかりません。

JQueryが存在し、デバッガーが_$_シンボルをオーバーライドしていない場合、$('td')はjQueryオブジェクトを返します。 jQueryオブジェクトは配列のようなオブジェクト（配列のプロパティをいくつか持っています）ですが、実際の配列ではありません。コンソールで物事を見ている場合、含まれているjQueryオブジェクトではなく、DOM要素自体を見ていることを確認する必要があります。

DOM要素の実際の配列を取得したい場合、これを行うことができます：

_$('td').get();
_

dOM要素の配列を返します。

それでもうまくいかない場合は、$('td').get()への呼び出しのタイミングを調べて、検索する前に、必要なすべてのtdアイテムがページにあることを確認する必要があります。

4
jfriend00

また、各tdで何かを実行しようとしている場合は、.each()を使用してそれらをループする必要があります。例えば：

$('td').each(function() {
   //do something relevant here
});
0
Zappa