Jquery selecteur first-child

Maljuna Kris · 31-01-2013 21:46:53

Saluton,

C'est de nouveau moi avec mes petits errements JQueryistiens.

J'ai un tableau dont chaque <tr> est affecté d'une des classes suivantes qui correspondent à des catégories d'items :

.sub { background-color : #FFF;display : table-row}

.adp { background-color : #FF8;display : table-row}

.vrb { background-color : #E8E;display : table-row}

.prp { background-color : #09F;display : table-row}

.adv { background-color : #8F8;display : table-row}

.exp { background-color : #FDF;display : table-row}

Je souhaite que le premeier <td> de chacun des <tr> de ces classes soit en affichage "bold"

        <script src="jquery.js"></script>

        <script>

            $(function(){

                $('.sub:first-child').css('font-weight','bold');

                $('.adp:first-child').css('font-weight','bold');

                $('.vrb:first-child').css('font-weight','bold');

                $('.prp:first-child').css('font-weight','bold');

                $('.adv:first-child').css('font-weight','bold');

                $('.exp:first-child').css('font-weight','bold');

            });

        </script>

Aucun message d'erreur dans Firebug et pourtant les caractères de ma première colonne demeurent d'une maigreur consternante.
Pour les curieux, voici un les 65 premières lignes du tableau, c'est un lexique Česká-francouzský slovník ◊ Lexique tchèque-français

            <table id="lexic">

                  <tr><th colspan="7"><a href="#" name="a"></a><h3>A</h3></th></tr>

                  <tr id="1" class="prp"><td>  a</td><td><em>et</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="1"></a></td></tr>

                  <tr id="2" class="exp"><td>  a proto</td><td><em>pour cela</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="2"></a></td></tr>

                  <tr id="3" class="exp"><td>  a proto</td><td><em>c'est pourquoi</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="3"></a></td></tr>

                  <tr id="4" class="exp"><td>  aby</td><td><em>afin que</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="4"></a></td></tr>

                  <tr id="5" class="exp"><td>  aby</td><td><em>pour que</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="5"></a></td></tr>

                  <tr id="6" class="sub"><td>  adresa</td><td><em>adresse</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="6"></a></td></tr>

                  <tr id="7" class="sub"><td>  adresát</td><td><em>destinataire</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="7"></a></td></tr>

                  <tr id="8" class="exp"><td>  ahoj !</td><td><em>salut</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="8"></a></td></tr>

                  <tr id="9" class="prp"><td>  ale</td><td><em>mais</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="9"></a></td></tr>

                  <tr id="10" class="sub"><td>  anděl</td><td><em>ange</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="10"></a></td></tr>

                  <tr id="11" class="adv"><td>  anglicky</td><td><em>anglais</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="11"></a></td></tr>

                  <tr id="12" class="sub"><td>  Angličan</td><td><em>Anglais (un)</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="12"></a></td></tr>

                  <tr id="13" class="sub"><td>  Angličanka</td><td><em>Anglaise (une)</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="13"></a></td></tr>

                  <tr id="14" class="sub"><td>  Anglie</td><td><em>Angleterre</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="14"></a></td></tr>

                  <tr id="15" class="exp"><td>  ani - ani</td><td><em>ni - ni</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="15"></a></td></tr>

                  <tr id="16" class="adv"><td>  ano</td><td><em>oui</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="16"></a></td></tr>

                  <tr id="17" class="adv"><td>  asi</td><td><em>peut-être</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="17"></a></td></tr>

                  <tr id="18" class="sub"><td>  atmosféra</td><td><em>atmosphère</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="18"></a></td></tr>

                  <tr id="19" class="sub"><td>  auto</td><td><em>voiture</em></td><td>N</td><td></td><td></td><td></td><td>

<a href="#" name="19"></a></td></tr>

                  <tr id="20" class="sub"><td>  autobus</td><td><em>autobus</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="20"></a></td></tr>

                  <tr id="21" class="adp"><td>  autobusový</td><td><em>autobus (d')</em></td><td>-á</td><td>-é</td><td></td><td></td><td>

<a href="#" name="21"></a></td></tr>

                  <tr id="22" class="sub"><td>  automat</td><td><em>distributeur</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="22"></a></td></tr>

                  <tr id="23" class="sub"><td>  autoservis</td><td><em>station service</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="23"></a></td></tr>

                  <tr id="24" class="adv"><td>  až (do)</td><td><em>seulement</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="24"></a></td></tr>

                  <tr id="25" class="prp"><td>  až (do)</td><td><em>jusqu'à</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="25"></a></td></tr>

                  <tr><th colspan="7"><a href="#" name="b"></a><h3>B</h3></th></tr>

                  <tr id="26" class="sub"><td>  babička</td><td><em>Grand-mère</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="26"></a></td></tr>

                  <tr id="27" class="sub"><td>  balet</td><td><em>ballet</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="27"></a></td></tr>

                  <tr id="28" class="sub"><td>  baliček</td><td><em>paquet (petit)</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="28"></a></td></tr>

                  <tr id="29" class="sub"><td>  balik</td><td><em>paquet</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="29"></a></td></tr>

                  <tr id="30" class="sub"><td>  banka</td><td><em>banque</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="30"></a></td></tr>

                  <tr id="31" class="adp"><td>  barevný</td><td><em>coloré</em></td><td>-á</td><td>-é</td><td></td><td></td><td>

<a href="#" name="31"></a></td></tr>

                  <tr id="32" class="sub"><td>  barva</td><td><em>couleur</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="32"></a></td></tr>

                  <tr id="33" class="vrb"><td>  bát se</td><td><em>avoir peur</em></td><td>Imp.</td><td>bojím se</td><td></td><td></td><td>

<a href="#" name="33"></a></td></tr>

                  <tr id="34" class="vrb"><td>  bavit se</td><td><em>divertir (se)</em></td><td>Imp.</td><td>bavím</td><td>pobavit se</td><td>Perf.</td><td>

<a href="#" name="34"></a></td></tr>

                  <tr id="35" class="sub"><td>  bazén</td><td><em>piscine</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="35"></a></td></tr>

                  <tr id="36" class="vrb"><td>  běhat</td><td><em>courir</em></td><td>Imp.</td><td></td><td></td><td></td><td>

<a href="#" name="36"></a></td></tr>

                  <tr id="37" class="adv"><td>  během</td><td><em>pendant (au cours de)</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="37"></a></td></tr>

                  <tr id="38" class="sub"><td>  Belgičan</td><td><em>Belge (un)</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="38"></a></td></tr>

                  <tr id="39" class="sub"><td>  Belgičanka</td><td><em>Belge (une)</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="39"></a></td></tr>

                  <tr id="40" class="sub"><td>  Belgie</td><td><em>Belgique</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="40"></a></td></tr>

                  <tr id="41" class="sub"><td>  benzín</td><td><em>essence</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="41"></a></td></tr>

                  <tr id="42" class="sub"><td>  benzínová pumpa</td><td><em>pompe à essence</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="42"></a></td></tr>

                  <tr id="43" class="sub"><td>  běsky</td><td><em>ski de fond</em></td><td>F pl,</td><td></td><td></td><td></td><td>

<a href="#" name="43"></a></td></tr>

                  <tr id="44" class="adv"><td>  bez</td><td><em>sans</em></td><td>+ G</td><td></td><td></td><td></td><td>

<a href="#" name="44"></a></td></tr>

                  <tr id="45" class="adv"><td>  bezolovnatý</td><td><em>sans plomb</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="45"></a></td></tr>

                  <tr id="46" class="sub"><td>  biftek</td><td><em>beefsteak</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="46"></a></td></tr>

                  <tr id="47" class="sub"><td>  bilinkový čaj</td><td><em>tisane (infusion)</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="47"></a></td></tr>

                  <tr id="48" class="sub"><td>  bilinkový čaj</td><td><em>infusion (tisane)</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="48"></a></td></tr>

                  <tr id="49" class="adp"><td>  bilý</td><td><em>blanc</em></td><td>-á</td><td>-é</td><td></td><td></td><td>

<a href="#" name="49"></a></td></tr>

                  <tr id="50" class="sub"><td>  blahopřání</td><td><em>vœux</em></td><td>N</td><td></td><td></td><td></td><td>

<a href="#" name="50"></a></td></tr>

                  <tr id="51" class="vrb"><td>  blahopřát</td><td><em>souhaiter (bien des choses)</em></td><td>Imp.</td><td>přeju</td><td>+D, k +D</td><td>poblahopřat</td><td>P

<a href="#" name="51"></a></td></tr>

                  <tr id="52" class="sub"><td>  blanket</td><td><em>formulaire</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="52"></a></td></tr>

                  <tr id="53" class="sub"><td>  blesk</td><td><em>éclair</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="53"></a></td></tr>

                  <tr id="54" class="adp"><td>  bohatý</td><td><em>riche</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="54"></a></td></tr>

                  <tr id="55" class="adv"><td>  bohužel</td><td><em>malheureusement</em></td><td></td><td></td><td></td><td></td><td>

<a href="#" name="55"></a></td></tr>

                  <tr id="56" class="sub"><td>  bolení</td><td><em>douleur (qui fait mal)</em></td><td>N</td><td></td><td></td><td></td><td>

<a href="#" name="56"></a></td></tr>

                  <tr id="57" class="sub"><td>  bolení</td><td><em>mal (douleur)</em></td><td>N</td><td></td><td></td><td></td><td>

<a href="#" name="57"></a></td></tr>

                  <tr id="58" class="sub"><td>  bolest</td><td><em>douleur</em></td><td>F</td><td>(G -i)</td><td></td><td></td><td>

<a href="#" name="58"></a></td></tr>

                  <tr id="59" class="adp"><td>  bolestivý</td><td><em>douloureux</em></td><td>-á</td><td>-é</td><td></td><td></td><td>

<a href="#" name="59"></a></td></tr>

                  <tr id="60" class="vrb"><td>  bolet</td><td><em>mal (faire)</em></td><td>Imp.</td><td></td><td></td><td></td><td>

<a href="#" name="60"></a></td></tr>

                  <tr id="61" class="sub"><td>  boty</td><td><em>chaussures</em></td><td>F pl,</td><td></td><td></td><td></td><td>

<a href="#" name="61"></a></td></tr>

                  <tr id="62" class="sub"><td>  bouřka</td><td><em>orage</em></td><td>F</td><td></td><td></td><td></td><td>

<a href="#" name="62"></a></td></tr>

                  <tr id="63" class="sub"><td>  brambory</td><td><em>pommes de terre</em></td><td>F pl.</td><td></td><td></td><td></td><td>

<a href="#" name="63"></a></td></tr>

                  <tr id="64" class="vrb"><td>  brát</td><td><em>prendre</em></td><td>Imp.</td><td>beru</td><td>+ Acc</td><td>vzit, vzemu</td><td>P

<a href="#" name="64"></a></td></tr>

                  <tr id="65" class="sub"><td>  bratr</td><td><em>frère</em></td><td>M</td><td></td><td></td><td></td><td>

<a href="#" name="65"></a></td></tr>

                </table>

Bon là je n'ai que 146 items, mais, à terme, il y en aura environ 1500. Je sais que je pourrais encadrer toutes les valeurs de la première colonne avec des <b>item</b>, mais comme //ment je suis en train de mettre au point un petit moteur de recherche, je veux éviter de polluer le contenu de la colonne.

Je ne doute pas de me prendre encore une volée de bois vert de la part de notre cher Pierrot, mais là je tourne en rond sur cette technique car quelque chose doit m'échapper dans la syntaxe du sélecteur.

Bref, ça ne plante rien, mais ça ne rend pas le service attendu, juste ça me gonfle "grave" !!!

J'ai jamais autant bossé que depuis que je suis à la retraite, moi.

Même plus le temps de faire grève.

Merci de votre patience envers le 4° âge.

Amike, MK.

Maljuna Kris · 31-01-2013 22:06:12

Bon, j'ai fait évoluer la chose comme ceci:

        <script src="jquery.js"></script>

        <script>

            $(function(){

                $('.sub td:first').css('font-weight','bold');

                $('.adp td:first').css('font-weight','bold');

                $('.vrb td:first').css('font-weight','bold');

                $('.prp td:first').css('font-weight','bold');

                $('.adv td:first').css('font-weight','bold');

                $('.exp td:first').css('font-weight','bold');

            });

        </script>

Et là, j'obtiens un résultat qui m'a surpris, mais qui est pourtant cohérent avec la syntaxe.
La première cellule <td> de chacune des 6 classes est bien en fonte grasse.
Donc comment je dois faire, passer par un <colgroup> ?

Maljuna Kris · 31-01-2013 22:38:57

Youpiie !!! Larirette !

J'ai trouvé.

J'utilise la hiérachie à partir de l'id='lexic' du tableau

        <script src="jquery.js"></script>

        <script>

            $(function(){

                $('#lexic tr td:first-child').css('font-weight','bold');

            });

        </script>

Trop fort ce Jquery, une seule instruction.

Bon, j'ai bien mérité un petit dodo.

Ah et puis, merci à tous

Pierrot · 01-02-2013 10:28:45

çà s'appel de l'auto-aide :D
a++

Jc · 13-02-2013 20:50:02

Salut MK,

Je te conseille vivement de définir tes comportements par défaut dans une feuille de style css et tes comportements particuliers inline avec jquery/js. Parce que certes, tu ne pollues pas ton html en procédant comme tu l'as fait, mais tu pollues ton code javascript...
Ensuite sache que les pseudo classes existent aussi en css et non pas qu'en Jquery, même si elles sont plus étendues en jquery.

D'autre part, peut-être sont-ce des pratiques à la mode, mais de plus en plus de gens, de part la simplicité d'écriture qu'offre jquery, ont tendance à boucler sur des classes ou attributs pour modifier le DOM pour, je cite "rendre le code indépendant de valeurs d'id" sous pretexte qu'elles changent au fil du temps et des modifications de code.

Or c'est tout sauf performant. Travailler le plus possible sur des ids invariants avec une convention de nommage propre est à mon sens incontournable, car c'est un Must Have en terme de performances applicative.

Sinon faire un <td class="first_td"></td> ne pollue en rien l'écriture du html entre nous, et quand tu regardes bien, cela t'économise bien des traitements...

++

Dernière modification par Jc (13-02-2013 20:59:52)

Maljuna Kris · 13-02-2013 21:29:03

Jc a écrit :

Salut MK,

Salut Jc,

Jc a écrit :

Je te conseille vivement de définir tes comportements par défaut dans une feuille de style css et tes comportements particuliers inline avec jquery/js. Parce que certes, tu ne pollues pas ton html en procédant comme tu l'as fait, mais tu pollues ton code javascript...

????

Jc a écrit :

Ensuite sache que les pseudo classes existent aussi en css et non pas qu'en Jquery, même si elles sont plus étendues en jquery.

En l'occurrence, je ne vois pas quelle pseudo-classe CSS je peux invoquer ici

Jc a écrit :

Sinon faire un <td class="first_td"></td> ne pollue en rien l'écriture du html entre nous, et quand tu regardes bien, cela t'économise bien des traitements...

Là, je ne suis pas sûr de te suivre, entre une instruction JQuery :

    <script src="jquery.js"></script>

    <script>

    $(function(){

    $('#lexic tr td:first-child').css('font-weight','bold');

    });

    </script>

et répéter 1500 foix class="first_td" dans la première <td> des 1500 <tr> du lexique, à quoi il faut bien ajouter une petite règle CSS pour la class first_td, je ne vois pas bien l'avantage.
Et quels traitements sont donc économisés ? sachant que j'utilise, évidemment, JQuery, pour d'autres fonctionnalités dans la page.

Jc · 13-02-2013 22:36:20

Re Mk,

Et bien pas de soucis, on va détailler.
Et on va commencer par poser les choses.

1. <td class="first_td"></td>

Quand tu écris cela, le comportement CSS de ta balise est chargé en même temps que ta page, ce qui implique qu'il n'y a aucun calcul ultérieur du navigateur pour savoir comment il doit afficher le contenu, l'affichage est instantané.
EDIT: je rappele aussi que la classe est définie une fois pour toutes, quelque soit la complexité de sa définition, et évite de toute réécrire comme on devrait le faire si on le fait inline (style=" ").
On factorise ainsi le code et on protège le comportement de base au niveau style, contrairement à l'écriture inline, qui l'expose.

2. $('#lexic tr td:first-child').css('font-weight','bold');

Ceci est très optimisé car cela applique ce que je viens de dire, à savoir que ta recherche primaire dans le DOM se fait par ID (présence de: #). Donc le scan du dom est très limitatif et donc la performance est du même ordre de grandeur que la recherche de l'ID.

3. et répéter 1500 foix class="first_td" dans la première <td> des 1500 <tr> du lexique, à quoi il faut bien ajouter une petite règle CSS pour la class first_td, je ne vois pas bien l'avantage.

On a un problème ici, cela voudrait-il dire que tu as 1500 fois l'ID "lexic" présent dans ton DOM? que fais-tu de l'unicité de l'ID que tu as besoin de préserver de plus dans ton cas de figure? Vu le nombre de lignes concernées ta recherche par ID se rapprochera de la performance d'une recherche par [name=xxxx] : Un quasi-full scan de ta page qui comporte autant de lignes pour appliquer les modifications CSS à un comportement statique localisé est bien moins performant que de rajouter un class="first_td" sur chacune de tes 1500 lignes, car le traitement est immédiat. On est donc bien dans un cas de traitement multiple qui justifie mon choix et qui invalide ton choix d'implémentation.

maljuna kris a écrit :

Jc a écrit :
Je te conseille vivement de définir tes comportements par défaut dans une feuille de style css et tes comportements particuliers inline avec jquery/js. Parce que certes, tu ne pollues pas ton html en procédant comme tu l'as fait, mais tu pollues ton code javascript...
????

Pour bien comprendre ce qui se passe sous le capot quand tu écris par exemple

$("td[name='xxx']").css("font-weight","bold");

 

1. Jquery scanne le DOM à la recherche de toutes les balises td ayant pour attribut name="xxx".
2. A chaque fois qu'il rencontre une balise td qui vérifie les conditions requises il va insérer dans la balise le code suivant : style="font-weight:bold" et si l'attribut style existe déjà il va y rajouter cette définition à celle existante, et la remplacer si l'attribut font-weight est déjà présent.
3. Le code est réévalué et l'affichage est mis à jour par le navigateur.

=> Dans ces conditions, laquelles de nos solutions respectives est la plus performante à ton avis?

++

Dernière modification par Jc (13-02-2013 23:48:02)

Jc · 14-02-2013 00:07:34

Re,

Concernant les pseudo classes : http://www.w3schools.com/css/css_pseudo_classes.asp

Maljuna Kris · 14-02-2013 08:22:19

OK pour ton avant-dernier raisonnement, d'autant que les 1500 lignes sont générées par un script PHP (Ouf ! je n'aurais pas à saisir 1500 fois class="first-child").
Par contre, tu penses que je peux même me contenter de mettre

#lexic tr td:first-child'{font-weight:bold}

dans la feuille de style ?
Aurais-je sombré dans une forme de JQuerite ?
Ce serait bien paradoxal, moi qui suis resté assez rétif à cette technologie.

Maljuna Kris · 14-02-2013 08:42:47

Et je confirme (j'avais au demeurant peu de doutes) que la règle CSS seule offre le même service.
Dont acte.

nicolas · 14-02-2013 09:46:25

Mon avis pour aller de l'eau au moulin ou pour carrément dévier la rivière !!!

Je suis d'accord avec JC sur le fait de mettre/modifier/ajouter des styles directement avec jQuery. Il est plus propre de travailler avec une classe (qui est d'ailleurs déjà "compilé" par le navigateur). Plutôt que de faire

$('tr').click(function() { 

   $(this).css('font-weight', 'bold');

});

Il est plus propre de faire :

$('tr').click(function() { 

   $(this).toggleClass('active');

});

En revanche, je ne suis pas du même avis. Il est bien plus propre d'utiliser la pseudo-classe :first-child que ce soit en css ou javascript plutôt que d'ajouter une classe first-child au premier fils. Je ne parle que css/html et pas javascript (j'y viendrais ensuuite). La différence de vitesse de rendu doit difficilement être perceptible à moins d'avoir une page de 10 kilomètres de long.

Concernant javascript il suffit de restreindre l'ensemble des noeuds à parcourir pour améliorer les performances :

$('tr td:first-child', '#identifiant-du-tableau-par-exemple')...

 

p.s: Par parenthèses, w3schools n'est pas forcément un bon site de référence. Il est bien présenté, est la plupart du temps correct mais contient quelques erreurs.

Maljuna Kris · 14-02-2013 11:07:33

nicolas a écrit :

Concernant javascript il suffit de restreindre l'ensemble des noeuds à parcourir pour améliorer les performances :

$('tr td:first-child', '#identifiant-du-tableau-par-exemple')...

Je ne suis plus sûr de pouvoir suivre.
J'ai mis

#lexic tr td:first-child {font-weight:bold}

dans ma feuille de style, il vaudrait mieux faire

$('tr td:first-child', '#lexic')...

????
J'ai du louper un épisode.

nicolas · 14-02-2013 11:21:24

Maljuna Kris a écrit :

nicolas a écrit :
Concernant javascript il suffit de restreindre l'ensemble des noeuds à parcourir pour améliorer les performances :

$('tr td:first-child', '#identifiant-du-tableau-par-exemple')...
Je ne suis plus sûr de pouvoir suivre.
J'ai mis
#lexic tr td:first-child {font-weight:bold}
dans ma feuille de style, il vaudrait mieux faire

$('tr td:first-child', '#lexic')...
????
J'ai du louper un épisode.

En fait ton besoin peut se résoudre totalement en css sans une once de javascript. Je répondais à Jc sur sa préférence entre une classe .first-child placé sur chaque premier fils et l'utilisation de la pseudo-classe :first-child.

Maljuna Kris · 14-02-2013 11:25:51

nicolas a écrit :

En fait ton besoin peut se résoudre totalement en css sans une once de javascript. Je répondais à Jc sur sa préférence entre une classe .first-child placé sur chaque premier fils et l'utilisation de la pseudo-classe :first-child.

Ah ! quel soulagement, je ne suis pas complètement perdu, il me reste quelque avenir.
Merci mon bon nicolas de ta charitable réponse à mon désarroi existentiel.

Jc · 14-02-2013 16:08:10

Bonjour,

Tout d'abord pour répondre à MK (mais cela vaut aussi pour nico )

maljuna kris a écrit :

$("#lexic tr td:first-child")

est mieux que

maljuna kris a écrit :

$('tr td:first-child', '#identifiant-du-tableau-par-exemple')

pour la bonne et simple raison que les sélecteurs jquery sont évalués avec une précédence de la gauche vers la droite. Et la recherche à partir de l'ID est toujours meilleure. EDIT: D'ailleurs je ne suis pas convaincu que la seconde fonctionne...

Ensuite pour nicolas,

nicolas a écrit :

Il est bien plus propre d'utiliser la pseudo-classe :first-child que ce soit en css ou javascript plutôt que d'ajouter une classe first-child au premier fils. Je ne parle que css/html et pas javascript (j'y viendrais ensuuite). La différence de vitesse de rendu doit difficilement être perceptible à moins d'avoir une page de 10 kilomètres de long.

Tu as tout à fait raison concernant les performances et la propreté du code. Par contre, et je dois bien l'avouer, lorsque l'on est dans un contexte ou les performances sont équivalentes, en général on adopte la solution naturelle à savoir ... celle de nos habitudes...

++

Dernière modification par Jc (14-02-2013 16:11:55)

nicolas · 14-02-2013 16:47:39

Jc a écrit :

$('tr td:first-child', '#identifiant-du-tableau-par-exemple')

pour la bonne et simple raison que les sélecteurs jquery sont évalués avec une précédence de la gauche vers la droite. Et la recherche à partir de l'ID est toujours meilleure. EDIT: D'ailleurs je ne suis pas convaincu que la seconde fonctionne...

Hé hé, toi aussi tu aurais été recalé en entretien !
Les candidats à qui j'ai posé la question avaient les réponses suivantes :
- je ne connais pas cette syntaxe. D'ailleurs je ne suis pas sûr qu'elle existe
- cette syntaxe n'existe pas
- c'est moins performant que de mettre li'dentifiant devant
- ...

Donc aussi bizarre que cela puisse paraître au premier abord la syntaxe $('.ma-classe', '#mon-id') est non seulement bien entendu valide mais est deux fois plus rapide (en général,...) que la syntaxe "normale" $('#mon-id .ma-classe')

nicolas · 14-02-2013 16:51:49

Je complète dans un nouveau message.
La doc est là :
http://api.jquery.com/jQuery/#jQuery1

Le test de perf est là : (mais on peut en trouver d'autres qui donnent le même ratio)
http://jsperf.com/jquery-selector-context-comparison

Evidemment si on peut accéder à l'élément directement il n'y a pas photo !

Jc · 14-02-2013 18:02:46

Merci Nicolas pour ton retour !

Parfois, et cet exemple confirme la règle, ca ne fait pas de mal de s'arrêter 5min pour réfléchir à ce que l'on fait, car l'exemple d'utilisation donné, je le connaissais, mais utilisé dans une closure... et je n'ai jamais pensé à l'utiliser hors de ce contexte , ca me paraît incroyable!.

Par contre je suis déçu des tests de perfs. En effet,

1) document.getElementById("MonID") et $("#MonID") censés être équivalents, démontrent une perte de 18% de perf pour JQuery, dû à la couche du Framework je pense.
2) D'après le lien de la doc que tu as fourni, que je vais reprendre ici, $(".MaClasse", $("#MonID")) et $("#MonID").find(".MaClasse") qui sont censés être absolument équivalent en interne à Jquery, montrent d'une difference de perf de presque 20% en faveur du find !! (qui rejoint quelque part ce que j'ai dit lorsque l'id est en premier soit dit en passant).

nicolas · 14-02-2013 18:29:08

Après il faut faire attention aux perfs car on en arrive à faire des choses contre nature (non, non rien de sexuel !!!!) :
en théorie $('#id2', '#id1') est plus performant que $('#id1 #id2') ce qui semble assez logique (et évidemment moins performant que $('#id2')). Mais il n'est pas très logique de devoir accéder à à l'élément d'id id2 comme enfant de #id2. En revanche le cas avec le contexte peut se trouver mais ce sera l'objet d'une autre histoire.

Maljuna Kris · 14-02-2013 19:48:57

Désolé les gars, mais je suis en panne d'aspirine.
A demain ?

PHP|Débutant :: Forums

Advertisement

#1 31-01-2013 21:46:53

Jquery selecteur first-child

#2 31-01-2013 22:06:12

Re : Jquery selecteur first-child

#3 31-01-2013 22:38:57

Re : Jquery selecteur first-child

#4 01-02-2013 10:28:45

Re : Jquery selecteur first-child

#5 13-02-2013 20:50:02

Re : Jquery selecteur first-child

#6 13-02-2013 21:29:03

Re : Jquery selecteur first-child

#7 13-02-2013 22:36:20

Re : Jquery selecteur first-child

#8 14-02-2013 00:07:34

Re : Jquery selecteur first-child

#9 14-02-2013 08:22:19

Re : Jquery selecteur first-child

#10 14-02-2013 08:42:47

Re : Jquery selecteur first-child

#11 14-02-2013 09:46:25

Re : Jquery selecteur first-child

#12 14-02-2013 11:07:33

Re : Jquery selecteur first-child

#13 14-02-2013 11:21:24

Re : Jquery selecteur first-child

#14 14-02-2013 11:25:51

Re : Jquery selecteur first-child

#15 14-02-2013 16:08:10

Re : Jquery selecteur first-child

#16 14-02-2013 16:47:39

Re : Jquery selecteur first-child

#17 14-02-2013 16:51:49

Re : Jquery selecteur first-child

#18 14-02-2013 18:02:46

Re : Jquery selecteur first-child

#19 14-02-2013 18:29:08

Re : Jquery selecteur first-child

#20 14-02-2013 19:48:57

Re : Jquery selecteur first-child

Pied de page des forums