PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Jquery selecteur first-child

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. lol

Merci de votre patience envers le 4° âge.

Amike, MK.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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> ?


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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 tongue


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 195

Re : Jquery selecteur first-child

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

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Jquery selecteur first-child

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Jquery selecteur first-child

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)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Jquery selecteur first-child

Re,

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


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

nicolas
Membre
Inscription : 11-11-2009
Messages : 69
Site Web

Re : Jquery selecteur first-child

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.

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

nicolas
Membre
Inscription : 11-11-2009
Messages : 69
Site Web

Re : Jquery selecteur first-child

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.

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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. wink


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Jquery selecteur first-child

Bonjour,

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

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... hmm

++

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


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

nicolas
Membre
Inscription : 11-11-2009
Messages : 69
Site Web

Re : Jquery selecteur first-child

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')

Hors ligne

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

nicolas
Membre
Inscription : 11-11-2009
Messages : 69
Site Web

Re : Jquery selecteur first-child

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 !

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : Jquery selecteur first-child

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 yikes, 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).


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

nicolas
Membre
Inscription : 11-11-2009
Messages : 69
Site Web

Re : Jquery selecteur first-child

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.

Hors ligne

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

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : Jquery selecteur first-child

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


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

Pied de page des forums