Comment obtenir le nième élément jQuery

311

Dans jQuery, $("...").get(3)retourne le 3e élément DOM. Quelle est la fonction pour renvoyer le 3e élément jQuery?

jquery Sam Lee
la source

Réponses:

310

Pourquoi ne pas parcourir la page (courte) des sélecteurs en premier?

Le voici: l' :eq()opérateur. Il est utilisé comme get(), mais il renvoie l'objet jQuery.

Ou vous pouvez également utiliser la .eq()fonction.

Dykam
la source
23
N'est-ce pas censé être à la .eq()place de :eq()?
RubenGeert
15
Oui, .eq()est plus approprié pour la question du PO. :eq()est utilisé dans le paramètre de chaîne to $, alors qu'il .eq()s'agit d'une méthode sur un objet jQuery existant.
mjswensen
55
Je jure que je dois aller voir ça chaque fois . célibataire . le temps .
ivarni
3
@JoelWorsham Dépend du comportement souhaité. $('select').find('option').eq(n)ignorera essentiellement le regroupement et obtiendra toutes les options dans leur ensemble. Si vous le voulez par groupe, quelque chose comme ça est nécessaire:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
4
"Pourquoi ne pas parcourir la page (courte) des sélecteurs en premier?" - Parce que "eq" est un très mauvais nom et je le saute régulièrement car eq pour moi signifie comparaison ....
mmlac
309

Vous pouvez utiliser le sélecteur : eq , par exemple:

$("td:eq(2)").css("color", "red"); // gets the third td element

Ou la fonction eq (int) :

$("td").eq(2).css("color", "red");

N'oubliez pas non plus que les index sont basés sur zéro.

CMS
la source
7
En tant que synonyme, vous pouvez également utiliser le :nth()sélecteur - à ne pas confondre avec:nth-child()
user123444555621
La meilleure réponse et non édité 3 ans après le fait :)
Andrew
merci d'avoir réellement expliqué comment utiliser le sélecteur / fonction
Joseph Rogers
49

si vous avez le contrôle sur la requête qui construit l'objet jQuery, utilisez :eq()

$("div:eq(2)")

Si vous n'avez pas de contrôle dessus (par exemple, il est transmis depuis une autre fonction ou quelque chose), utilisez .eq()

var $thirdElement = $jqObj.eq(2);

Ou si vous voulez une section d'entre eux (par exemple, les troisième, quatrième et cinquième éléments), utilisez .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
la source
Je cherchais une tranche, mais je ne savais pas trop comment chercher. Merci d'avoir dépassé ce qui est requis dans la question d'origine.
Samik R
4
Pour les personnes qui trébuchent sur cette réponse, un point utile à noter est que le sélecteur du nième enfant est basé sur 1 tandis que: eq ou .eq () sont basés sur 0
Sudhanshu Mishra
1
Vous devez utiliser .eq()au lieu de :eq()réellement. Légère amélioration des performances.
Qwerty du
13

Je pense que vous pouvez l'utiliser 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Il trouve le deuxième li dans chaque ul apparié et le note.

JoenasE
la source
11

.eq () -Un entier indiquant la position 0 de l'élément.

Ex:

Considérez une page avec une simple liste:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Nous pouvons appliquer cette méthode à l'ensemble des éléments de la liste:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Pour plus d'informations: .eq ()

tilak
la source
3

Si vous avez déjà l'objet jquery dans une variable, vous pouvez également le traiter comme un tableau indexé normal, sans utiliser jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Bien que l'exemple ci-dessus ne soit d'aucune façon utile, il représente la façon dont vous pouvez traiter les objets créés par jquery comme des tableaux indexés.

Au.Merci
la source
À droite, et un autre indice (si tout va bien utile): Si la ligne contient une liste d' <select>éléments et que vous voulez l'élément combobox sélectionné, utilisez$(row).val();
Matt
2

Si je comprends bien votre question, vous pouvez toujours envelopper la fonction get comme ceci:

var $someJqueryEl = $($('.myJqueryEls').get(3));
user1205577
la source
3
C'est juste la "voie difficile" et c'est ce que eq()vous donne gratuitement.
Caumons
1

Si vous voulez récupérer un élément / nœud ou une étiquette en boucle, par exemple

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Donc, à partir de la boucle de code ci-dessus est exécutée et nous voulons sélectionner un champ particulier pour cela, nous devons utiliser la sélection jQuery qui ne peut sélectionner que l'élément attendu de la boucle ci-dessus, donc le code sera

$('.weekdays:eq(n)');

par exemple

$('.weekdays:eq(0)');

ainsi que par une autre méthode

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

mais la première méthode est plus efficace lorsqu'elle HTML <tag>a un nom de classe unique.

REMARQUE: la deuxième méthode est utilisée quand il n'y a pas de nom de classe dans l'élément ou le nœud cible.

pour plus, suivez https://api.jquery.com/eq/

Vrushal Raut
la source
0

Pour les itérations, l'utilisation d'un sélecteur ne semble pas avoir de sens cependant:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

la source
0

Exemple en direct pour accéder et supprimer le Nième élément avec jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Lorsqu'il s'exécute, deux éléments de la liste ordonnée s'affichent, Premier et Troisième. Le second était caché.

Eric Leschinski
la source
PS: le décompte commence à 0; Le premier est à l'index 0, le second est à l'index 1 et ainsi de suite ....
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Sanjay Verma
la source
"$ (function () {" au début de l'automne, j'ai créé une fonction anonyme, qui s'est déclenchée automatiquement. À l'intérieur, j'ai trouvé trois div parentaux utilisant des frères et sœurs. Puis j'ai itéré dans les 3 div parent et vérifie la longueur de chaque longueur des enfants. Comment je peux identifier que ce soit une dernière division ou non dans la division parent. Maintenant, j'alerte le dernier div html de chaque division principale de 3 parents
Sanjay Verma
Vous pouvez modifier votre réponse, au lieu de donner des informations dans les commentaires :)
T3 H40