Discussion :

[clavier12AZQSWX]

bonjour,

j'ai un tableau dont je connais l'ID qui comporte 3 colonnes dont je ne connais pas les ID.
Chaque colonne comporte plusieurs élement de class BOITE.
Je voudrais que 1er élement BOITE de chaque colonne ait un padding top augmenté.

Mon problème : avec jquery, il y a la methode .first mais elle ne peut pas être "resetté par colonne", elle le fait que sur l'ensemble du document ! et comme un talbeau est accessible que par TR et non par "colonne", je ne sais pas comment faire ?

par exemple j'ai un code similaire à ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table id="montableau">
<tr>
<td><div class="boite">texte1</div><div class="autrechose">Grrrr</div></td>
<td><div class="autrechose">Grrrr</div></td>
<td><div class="boite">texte2</div><div class="autrechose">Grrrr</div></td>
</tr>
<tr>
<td><div class="autrechose">Grrrr</div></td>
<td><div class="boite">texte3</div><div class="autrechose">Grrrr</div></td>
<td><div class="boite">texte4</div><div class="autrechose">Grrrr</div></td>
</tr>
<tr>
<td><div class="autrechose">Grrrr</div></td>
<td><div class="autrechose">Grrrr</div></td>
<td><div class="boite">texte5</div><div class="autrechose">Grrrr</div></td>
</tr>
</table>

si j'utilise cette technique de .first :
https://api.jquery.com/first/

alors je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( ".boite" ).first().css( "padding-top", 50 );

mais le problème c'est que ça modifie que la premiere "boite" de la 1ere colonne et hélas pas toutes les 1eres boites de chaque colonne.

Dans mon résultat souhaité, texte1 texte3 et texte5 devraient avoir leur padding-top augmenté...
sachant que je ne sais pas où ils sont positionné, ni leur id, ni même s'ils sont là, je veux juste augmenter le padding du 1er élement de class BOITE dans chaque TR (colonne).

une idée de comment je pourrais itérer/parcourir cela sans IDs des colonnes ?

merci de votre conseil ou tuyaux.

[NoSmoking]

Bonjour,

$( ".boite" ).first().css( "padding-top", 50 );

en faisant de la sorte, seul le premier élément, quelque soit son paren, est pris en compte.

Ces éléments n'étant pas parent direct des <tr> il te faut boucler sur ces dernières pour mieux cibler la sélection.

Quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("tr").each(function() {
  $(this).find(".boite").first().css(
    "padding-top", 50);
});

[clavier12AZQSWX]

merci NoSmoking, je ne connaissais pas cette syntaxe ou façon pour parcourir/boucler :

$("tr").each(function() {..etc

très instructif et utile !

si je veux appliquer cela qu'au 3 premieres colonnes TR et non pas au 52, y-a-t-il un moyen de "breaker" l'iteration ou la limiter à 3 TR ?

j'ai regardé la doc : https://api.jquery.com/each/
visiblement il n'y a pas d'argument ou paramètre à ajouter pour limiter à 3;

[Toufik83]

Bonjour,

Pour les 3 premieres lignes, tu peux utiliser le sélecteur Less Than :lt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("#montableau tr:lt(3)").each(function(){
........
});

Ou bien sans :lt mais + l'utilisation du paramètre index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$("#montableau tr")
.each(function( index,tr ) {
    //le paramètre tr représente le <tr> parcouru, et $(tr).index()==index
    if(index<3){
            ....
    }
});

[clavier12AZQSWX]

ah oui c'est super pratique

ps : la 1ere ligne de chacune des 3 colonnes c'est les 3 TD, et non pas les 3 TR; donc c'est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("#montableau td:lt(3)").each(function(){
		$(this).find(".boite").first().css("margin-top", 50);
 
	});

[NoSmoking]

Pour les 3 premieres lignes, tu peux utiliser le sélecteur Less Than :lt :

Tout à fait ou encore avec un sélecteur CSS3 :nth-child(-n +3).

Je me pose quand même une question, ne serait-il pas plus judicieux de le faire côté serveur !?!