Étiquette : each

[jQuery] Un colonage à la carte dans une liste imbriquée type menu

Markup HTML de départ:

En partant de là, impossible d’obtenir un colonage correct en utilisant uniquement CSS (ou alors soit avec Grid Layout mais on doit, entre autres, supporter IE-11 soit avec du positionnement absolu calculé au poil de cul près et c’est un contenu dynamique…).

Il faut donc modifier le markup en rajoutant des niveaux d’imbrication dans nos listes. Problème: c’est un menu Responsive et c’est ce markup qui est utilisé pour afficher l’aspect Smartphone. On ne peut pas le modifier « en dur ».

Markup HTML d’arrivée souhaité:

jQuery:

Notes: axes d’amélioration de ce code:

  • Pas besoin du parseInt dans var columnsAmount. On a besoin de la valeur en tant que nombre entier pour effectuer le calcul de la dernière ligne de ce code .wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />').
  • Probablement un moyen de supprimer les doublons immédiatement en renseignant le 1er tableau (pas besoin de 2 tableaux)

LESS:

[jQuery] Obtenir la somme des outerHeight de l’ensemble des éléments ayant la même classe

Source: Get the sum of the outerHeight of all elements of the same class.

…va me donner la somme des hauteurs des 3 éléments de la liste ci-dessus qui ont la classe .left-stack.

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.

[jQuery] Stocker dans un tableau tous les éléments d’une liste et ajouter des classes à n divs en fonction du contenu de ce tableau

Stocker dans un tableau tous les éléments d’une liste

Source: Get an array of list element contents in jQuery
.

Ajouter des classes à n divs en fonction du contenu de ce tableau

Source: How do I add class from array to n divs using .each function?
.

Exemple:

Code:

Résultat dans le DOM:

[jQuery] Utiliser la fonction each

Dans notre exemple, on cherche dans chaque <li> à déplacer l’élément <input /> dans l’élément <span class="checkbox-wrapper" />.

Code HTML de départ :

Code HTML voulu :

Code jQuery nécessaire :

[SASS] Incrémenter une classe et choisir la variable suivante dans une liste avec @each

Source : SASS – Increment a class and choose the next variable in a list

[jQuery] Reporter le libellé de la balise label dans le champ input, select, ou textarea qui lui est associé dans un formulaire

Simulation : http://jsfiddle.net/frontenddeveloper/F4LGN/

.parents('select').prev('label') est bien-sûr à modifier en fonction de l’emplacement de la balise label dans le dom.