web-dev-qa-db-fra.com

Le sélecteur jQuery simple ne sélectionne que le premier élément de Chrome ..?

Je suis un peu nouveau sur jQuery alors pardonnez-moi d'être dense. Je souhaite sélectionner tous les éléments <td> sur une page donnée via la console JS de Chrome:

$('td')

Pourtant, lorsque je fais cela, j'obtiens le résultat suivant:

<td>Apples</td>

JQuery n'est-il pas censé renvoyer un tableau d'éléments avec la balise <td>? Pourquoi ne vois-je que le premier élément correspondant à ce critère?

Voici le site en question: http://www.w3schools.com/html/html_tables.asp

EDIT: J'aimerais ajouter que lorsque je tape une fonction jQuery dans la console Chrome, je ne récupère PAS d'objet jQuery. Je reçois un élément HTML simple. Quelque chose ne va pas avec la façon dont mon Chrome est configuré.

jquerygoogle-chromeweb-scraping
43
fbonetti

Si jQuery n'est pas présent sur la page Web et, bien entendu, aucun autre code n'attribue quelque chose à $, la console JS de Chrome attribue à $ un raccourci vers document.querySelector().

Vous pouvez obtenir ce que vous voulez avec $$(), auquel la console attribue un raccourci pour document.querySelectorAll().

Pour savoir si la page contient jQuery, vous pouvez exécuter jQuery dans la console. Pour savoir si jQuery est affecté à $, vous pouvez exécuter $().jquery qui retournera la version de jQuery si c'est le cas.

En outre, il existe des addons de navigateur pour injecter jQuery dans chaque page Web.

79
Gras Double

Il semble que jQuery ne soit pas correctement inclus pour s'exécuter sur votre page cible. J'ai eu un problème similaire et résolu comme suit pour Google Chrome.

Ajoutez un signet à votre navigateur Chrome contenant le code à une ligne suivant comme champ d'URL (il est embelli pour plus de lisibilité):

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", "");
})();

Ensuite, cliquez simplement sur ce signet pour l'exécuter. Il est prévu d'inclure normalement jQuery et de faire en sorte que la console retourne quelque chose comme function (e,t){return new b.fn.init(e,t,r)} lorsque vous tapez $. 

Le processus de création du signet (également appelé bookmarklet) est un raccourci pour l’injection de jQuery dans chaque page sur laquelle vous souhaitez travailler avec la console. Toutefois, le code d'extrait fonctionne également si vous le copier-coller directement dans la console JS.

PS: Les crédits pour l'extrait de code ne m'appartiennent pas, car je l'utilise depuis un moment et je ne me souviens plus d'où il provient. 

J'espère que ça aide.

15
rdonatoiop

Si jQuery est installé et si le symbole $ est un raccourci pour jQuery, alors $('td') renvoie un objet jQuery. Mais dans la page w3schools que vous avez liée, je ne vois pas que jQuery est même présent.

Si jQuery était présent et que le débogueur n'a pas remplacé le symbole $, alors $('td') renverrait un objet jQuery. L'objet jQuery est un objet semblable à un tableau (possède certaines propriétés d'un tableau), mais ce n'est pas un tableau réel. Si vous regardez des choses dans la console, vous devrez alors vous assurer que vous regardez les éléments DOM eux-mêmes, pas l'objet jQuery contenant.

Si vous voulez obtenir un tableau réel d'éléments DOM, vous pouvez faire ceci:

$('td').get();

qui retournera un tableau d'éléments DOM.

Si cela ne fonctionne pas, vous devez alors examiner le moment de votre appel à $('td').get() pour vous assurer que tous les éléments td que vous souhaitez figurent dans la page avant de les rechercher.

4
jfriend00

De plus, si vous essayez de faire quelque chose avec chacun des td, vous devrez utiliser un _.each() pour les parcourir en boucle. Par exemple:

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