18043 sujets

Questions générales et questions de débutants

[Résolu] Repérer des lignes dans une boucle for

Bonjour,

Je pose ma question ici car s'il s'agit de compilation CSS il est plutôt question de boucles for. Le langage utilisé est Stylus, mais peut importe au fond, ma question est valable pour tout type de code étant capable de faire une boucle.

Ma question la voici : Dans une boucle for j'ai besoin d'incrémenter deux variables, une pour incrémenter un item en cours et une pour incrémenter une ligne. Comment simplifier le code suivant afin de supprimer les conditions pour les lignes ?

for $i in 1...101
  screen :nth-child({$i})
    if $i < sqrt(101)
      $col = 1
    if ($i > sqrt(101)) and ($i < (sqrt(101) * 2))
      $col = 2
    if ($i > 20) and ($i < 31)
      $col = 3
    if ($i > 30) and ($i < 41)
      $col = 4
    if ($i > 40) and ($i < 51)
      $col = 5
    if ($i > 50) and ($i < 61)
      $col = 6
    if ($i > 60) and ($i < 71)
      $col = 7
    if ($i > 70) and ($i < 81)
      $col = 8
    if ($i > 80) and ($i < 91)
      $col = 9
    if ($i > 90)
      $col = 10
    background-position ((-8vmin * $i) + 8) ((-8vmin * $col) + 8)


Le code en ligne pour voir le contexte (et là où j'en suis actuellement) : CodePen

Merci pour vos réponses.
Modifié par Olivier C (31 Mar 2016 - 11:38)
Bonjour,
Je n'ai pas lu en détail ton code (je suis sur un Smartphone...) mais si je saisis bien ton problème tout repose sur une question d'intervalle. Pourquoi ne pas utiliser un modulo 10 ? A priori cela te donnerait de suite la valeur d'index.
M'enfin, si j'ai bien compris le sujet Smiley cligne
Voilà où j'en suis actuellement, mais je suis sûr qu'il y aurait moyen de simplifier cette formule (exemple pour une numérotation des lignes) :
sqrt(x) // fonction racine carée
  return math(x, 'sqrt')

$n = 100 // Items
$rn = sqrt($n)
$length = 1...($n + 1)

// BEGIN test

for $i in $length
  if ($i < ($rn + 1))
    $col = '' + L1 + ''
  else if ($i < (($rn * 2) + 1))
    $col = '' + L2 + ''
  else if ($i < (($rn * 3) + 1))
    $col = '' + L3 + ''
  else if ($i < (($rn * 4) + 1))
    $col = '' + L4 + ''
  else if ($i < (($rn * 5) + 1))
    $col = '' + L5 + ''
  else if ($i < (($rn * 6) + 1))
    $col = '' + L6 + ''
  else if ($i < (($rn * 7) + 1))
    $col = '' + L7 + ''
  else if ($i < (($rn * 8) + 1))
    $col = '' + L8 + ''
  else if ($i < (($rn * 9) + 1))
    $col = '' + L9 + ''
  else if ($i < (($rn * 10) + 1))
    $col = '' + L10 + ''
  else
    $col = '' + L0 + '' // Feedback
  screen :nth-child({$i})::after
    content $col

Le CodePen

Avec deux boucles for imbriquées peut-être, mais je ne sais comment procéder...
Modifié par Olivier C (01 Apr 2016 - 12:33)
Bonjour,

Perso, j'aurais fait comme sepecat :
for $i in $length
  screen :nth-child({$i})
    $col = floor( ($i - 1) / 10)
    background-position ((-8vmin * $i) + 8) ((-8vmin * $col))

À moins d'avoir mal compris ce que tu souhaites faire... Smiley confused
SolidSnake a écrit :
Bonjour,

Perso, j'aurais fait comme sepecat :
for $i in $length
  screen :nth-child({$i})
    $col = floor( ($i - 1) / 10)
    background-position ((-8vmin * $i) + 8) ((-8vmin * $col))

À moins d'avoir mal compris ce que tu souhaites faire... Smiley confused

Bien vu Smiley smile
Histoire de grappiller quelques pouillèmes de milliseconde à l'exécution, je suggère de supprimer la variable col et transférer directement l'obstruction floor dans l'assignation.
La variable n'est en effet utilisée qu'une seule fois.
Pinaillage, certes, mais sur un nombre de bloc important c'est toujours ça de pris Smiley cligne
sepecat a écrit :
Histoire de grappiller quelques pouillèmes de milliseconde à l'exécution, je suggère de supprimer la variable col et transférer directement l'obstruction floor dans l'assignation.

Je ne suis pas contre, on perd juste en lisibilité et maintenabilité, mais pourquoi pas...

En tout cas, Olivier, l'effet est sympa ! Smiley cligne
SolidSnake a écrit :

Je ne suis pas contre, on perd juste en lisibilité et maintenabilité, mais pourquoi pas...

En tout cas, Olivier, l'effet est sympa ! Smiley cligne

Tout à fait exact.
Dans un but pédagogique ta formulation est effectivement préférable.
Et l'effet visuel d'Olivier est également original.
PS : dans ma précédente réponse il fallait bien entendu lire "instruction" en lieu et place de "obstruction" (cochonnerie de complétion sur les claviers de portables Smiley fache )
SolidSnake a écrit :
Perso, j'aurais fait comme sepecat...

Ah oui ! Mais sans l'exemple je n'avais pas compris ! Merci à vous tous. Sujet résolu.

J'ai donc lié la fonction avec une fonction de racine carrée qui me permet d'éviter de mettre la valeur "10" en dur et qui me permettra de décliner le code en nombre de carrés à la demande :
sqrt(x)
  return math(x, 'sqrt')

$n = 100 // Items
$rn = sqrt($n)
$length = 1...($n + 1)

for $i in $length
  screen :nth-child({$i})
    $col = floor( ($i - 1) / $rn)
    background-position ((-8vmin * $i) + 8) ((-8vmin * $col))


Un dernier petit exemple pour la route : CodePen, Earth
sepecat a écrit :
Histoire de grappiller quelques pouillèmes de milliseconde à l'exécution, je suggère de supprimer la variable col et transférer directement l'obstruction floor dans l'assignation.
La variable n'est en effet utilisée qu'une seule fois.

En fait la compilation du Style se fait via Gulp dans un fichier CSS qui ne bouge plus une fois compilé. Donc laisser la variable pour plus de clarté me semble préférable dans ce cas.

Merci encore ! Et bonne soirée à vous tous.
Sujet clos
Aller à