Comment sélectionner un seul élément dans jQuery?

Question

J'ai une structure de table qui ressemble à:

<table> 
<tr id="row1"> 
    <td> 
    <div>row 1 content1</div> 
    </td> 
    <td> 
    <div>row 1 content2</div> 
    </td> 
    <td> 
    <div>row 1 content3</div> 
    </td> 
</tr> 
<tr id="row2"> 
    <td> 
    <div>row 2 content1</div> 
    </td> 
    <td> 
    <div>row 2 content2</div> 
    </td> 
    <td> 
    <div>row 2 content3</div> 
    </td> 
</tr> 
<tr id="row3"> 
    <td> 
    <div>row 3 content1</div> 
    </td> 
    <td> 
    <div>row 3 content2</div> 
    </td> 
    <td> 
    <div>row 3 content3</div> 
    </td> 
</tr> 
</table> 

En utilisant jQuery Je suis en train de sélectionner la DIV dans la deuxième cellule de la troisième rangée. J'ai essayé les éléments suivants (entre autres):

var d = $('#row3').children(':eq(1)').children(':eq(0)'); 

Ce que je reviens est un tableau avec un seul élément (la DIV que je suis après) et je dois ensuite accéder à l'aide d [0]. Pourquoi jQuery retourne-t-il un seul tableau d'éléments, je pensais que l'utilisation du sélecteur ci-dessus retournerait directement l'élément DIV?

---

@Shog9 - Duh ... Ok une lumière juste allumé dans mon cerveau, je reçois maintenant. À votre santé.

Answer 1

jQuery renvoie toujours un ensemble d'éléments. Parfois, l'ensemble est vide. Parfois, il ne contient qu'un seul élément. La beauté de ceci est que vous pouvez écrire du code pour travailler de la même façon quel que soit le nombre d'éléments sont présents:

$("selector").each(function() 
{ 
    this.style.backgroundColor = "red"; 
}); 

Fun!

Answer 2

Si vous trouvez que vous savez que vous ne traiterez qu'avec un seul élément et qu'un seul élément sera retourné, vous pouvez toujours sélectionner l'index zéro du tableau.

$("selector")[0].value 

Il est sale et rompt la convention de jQuery en général ... mais vous "pourriez" le faire.

Answer 3

Si vous préférez garder un objet jQuery, vous pouvez écrire à la place:

$("selector").first().val() 

Answer 4

$("selector").eq(5)

Ce retourne une première rangée classe jquery avec juste le 5ème élément. , c'est-à-dire que je peux faire des fonctions jquery sur la valeur de retour.

trouvé la réponse ici: https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements

Answer 5

Pour obtenir div directement, essayez ce

$divElement = $('#row3 td div');

Answer 6

Il y a plusieurs options pour ce faire:

« Sélectionnez le premier de plusieurs éléments Div dans l'extrait ci-dessous et changer sa couleur au rose »

<div>Div 1</div> <div class="highlight">Div 2</div> <div id="third">Div 3</div> <div class="highlight">Div 4</div>

Ici, nous pouvons sélectionner la première division de la manière suivante:

1) $("div").first().css("color","pink");
2) $("div:first").css("color","pink");
3) $("div:first-of-type").css("color","pink");

S'il vous plaît noter que 2 est une construction jQuery et non une construction css native et, par conséquent, peut être légèrement moins performante.