2010-07-02 6 views
1

En supposant que le sélecteur suivantComment accéder à chaque élément renvoyé par le sélecteur premier enfant

$("div span:first-child") 

appliqué en suivant le code html

John, Karl, Brandon

</div> 
    <div> 
    <span>Glen,</span> 
    <span>Tane,</span> 
    <span>Ralph</span> 
    </div> 

as seen on jquery doc

Y at-il un moyen de référencer "chaque" élément retourné?

Je ne peux pas l'air d'être en mesure de les utiliser itérer .each() (.Size() retours 0)

Mise à jour: vous avez raison il y a quelque chose de différent que je manqué pour une raison quelconque mais ne me suis pas venu à l'esprit que cela pourrait être un problème en lisant la documentation.

Il semble donc que premier enfant revient sélecteur que si l'élément est en fait le premier enfant et non pas seulement la première occurrence.

par exemple.

<div> 
    <h1>Names</h1> 
    <span>John,</span> 
    <span>Karl,</span> 
    <span>Brandon</span>  
    </div> 
    <div> 
    <span>Glen,</span> 
    <span>Tane,</span> 
    <span>Ralph</span> 
    </div> 

retournera uniquement l'étendue de la 2e div.

Est-ce une "caractéristique"? Existe-t-il une alternative pour sélectionner le premier enfant? (Basé sur l'occurrence)

+0

'la fois .Size()' et 'retour .length' ** 2 ** pour moi. Appelles-tu ton code dans '.ready()'? – jAndy

+0

.size() renvoie la longueur;) – jantimon

Répondre

3

Mise à jour pour la nouvelle question: Ce trouve la première travée dans chaque <div>, peu importe si elle est en fait le premier enfant.

$("div").find("span:first").each(function() { 
    alert("This is child #" + $(this).index() + " in this section: " + $(this).text()); 
});​ 

You can see a demo here.


Vous pouvez utiliser .each() pour faire ce que vous voulez, comme ceci:

$("div span:first-child")​.each(function() { 
    alert("This is child #" + $(this).index() + " in this section: " + $(this).text()); 
});​ 

You can test it out here.

Pour cela:

Je ne peux pas l'air d'être en mesure de les utiliser itérer .each() (.Size() retourne 0)

Il doit être quelque chose En dehors du code que vous avez publié, l'exécution de ce balisage fonctionne, comme vous pouvez le voir dans ma démo. Vous devez voir ce qui est différent dans votre balisage actuel ... cette différence est probablement ce qui cause le problème.

+0

vous avez raison Nick, il y a quelque chose de plus que j'ai clairement manqué. S'il vous plaît voir ma mise à jour. Merci. – qnoid

+0

@Cue - Modifié pour correspondre à votre nouveau balisage :) –

+0

Merci. Le titre de ma question semble tout à fait hors sujet maintenant si :). Il semble donc que le doc pour: first-child est trompeur. "Alors que: d'abord ne correspond qu'à un seul élément, le sélecteur: first-child peut correspondre à plus d'un: un pour chaque parent." Puisque: first-child requiert que l'enfant soit réellement le premier élément comparé à: first – qnoid

1
$("span:first-child > div").text('Whooo') 

Méthode 2 si la div a id

$("span:first-child > #divID"); 

chacun.

$("span:first-child > div").each(function(){ 
    $(this).doSomethig(); 
}) 

-

Test Case ::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google AJAX Search API Sample</title> 
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script> 
    <script type="text/javascript"> 
     google.load("jquery", "1"); 

     function OnLoad() 
     { 
     jQuery("div > span:first-child").each(function(){ 
      console ? console.log(this) : alert(typeof this); //Logs the element 
     }); 
     } 
     google.setOnLoadCallback(OnLoad); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
<div> 
    <span>John,</span> 
    <span>Karl,</span> 
    <span>Brandon</span> 

    </div> 
    <div> 
    <span>Glen,</span> 
    <span>Tane,</span> 
    <span>Ralph</span> 
    </div> 
    </body> 
</html> 
+0

'" span: premier-enfant> div "' doit être '' span span: premier-enfant "' – jantimon

+0

oui désolé votre correct, je voulais faire 'div> spac: premier-enfant'. – RobertPitt

3
$("div span:first-child").each(function(){ 
      alert($(this).text());} 
    ); 

Demo

Alternativement,

var spans=$("div span:first-child"); 
$.each(spans, function(index, sp) { 
alert(index + ' - ' +$(sp).text()); 
}); 

Demo2

2

Utilisez find pour obtenir la première travée correspondante dans tous les div de

$("div").find("span:first")

Ces variations devraient fonctionner aussi bien:

span:lt(1) 
span:eq(0) 
span:not(:gt(0)) // speaking of efficiency :) 
Questions connexes