web-dev-qa-db-fra.com

JQuery sélectionne un élément dans un td

J'aimerais sélectionner un élément dans le td de l'un de mes tableaux mais je ne comprends pas vraiment la syntaxe. Voici ce que j'ai essayé:

$("table > td:#box")

Voici un exemple de la structure de ma table:

<div id="main">
<div id="today">
    <table id="list" width="100%" cellpadding="4" cellspacing="0" border="0" style="font-size: 10px; border-collapse:collapse;">
    <tr id="109008">
    <td class="tdstd">
    <a class="box" href="link"></a>
    </td>

Ou avec l'inspecteur DOM de Chrome:

alt text

jquerycss-selectors
11
Roch

Eh bien, "#box" signifie un objet DOM avec l'id "box", dans la mesure où il s'agit d'un ID unique. Vous pouvez sélectionner celui-ci directement. Mais votre code suggère que vous ayez plusieurs éléments avec l'id "box" que vous devez changer. Vous devez assigner une classe à votre élément à l'intérieur du TD, ou si elle est unique en étant le seul DIV ou SPAN de la boîte, vous pouvez y accéder comme suit:

$("table td .box")

Notez que le sélecteur ">" signifie que TD doit être un enfant direct de TABLE, et je suppose que vous avez au moins un niveau TR entre les deux, ce qui ne fonctionnera pas non plus. Mon exemple ci-dessus correspond à chaque élément avec la classe "box" à l'intérieur de n'importe quel TD qui est un enfant de tout TABLE.

Évidemment, je mettrais aussi une classe sur la table et utiliserais quelque chose comme ceci:

$("table.boxes td .box")

Pour que vous ne sélectionniez pas accidentellement des éléments extérieurs à la portée dans laquelle vous souhaitez travailler.

Vous avez maintenant ajouté le code HTML, donc je modifie ma réponse:

$("table#list a.box")
17
Sandman

Le sélecteur le plus efficace serait:

$('#list').find('a.box');

ou:

$('a.box', $('#list')[0]);

En sélectionnant la table id, vous avez d'abord défini votre portée sur la table uniquement, puis vous pouvez rechercher l'élément dont vous avez besoin dans cette table.

Le deuxième sélecteur est identique, vous sélectionnez quelque chose et vous donnez la portée en tant que deuxième paramètre.

C'est simplement plus facile de lire le premier.

9
Bjarki Heiðar
 $("table tr td .box")

Devrait faire l'affaire.

2
Vincent Ramdhanie

Ce sélecteur ...

table td a.box

indique à jQuery de rechercher la balise a avec un attribut class qui contient "box". Et cette balise a doit être à l'intérieur d'une td qui est à l'intérieur d'une table.

0
Josh Stodola