Étiquette : each

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

03/02/2023 / admin

Ressource: How to loop through array in jQuery?. très bien expliqué avec des exemples spécifiques pour du javasqcript vanilla (ES5, ES6, …) et l’utilisation avec this.

Dans mon exemple, je cherche simplement à ré-initialiser un carousel Slick Slider dès qu’un nouveau breakpoint est rencontré. Il est important de comprendre que c’est le même code qui est exécuté à chaque fois.

Si vous souhaitez utiliser des paramètres différents en fonction de vos vues (Mobile, Tablet, Desktop) avec Slick Slider, il faut utiliser l’option responsive.

var slickBreakpoints = [
    '(max-width: 639px)',
    '(min-width: 640px) and (max-width: 959px)',
    '(min-width: 960px)'
];

$.each(slickBreakpoints, function(index, breakpoint) {
    mediaCheck({
        media: breakpoint,
        entry: function () {
            msgContainer
                .slick('unslick')
                .slick(slickConfig);
        }
    });
});

var slickBreakpoints = [

'(max-width: 639px)',

'(min-width: 640px) and (max-width: 959px)',

'(min-width: 960px)'

];

$.each(slickBreakpoints, function(index, breakpoint) {

mediaCheck({

media: breakpoint,

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

…revient à déclarer ceci:

mediaCheck({
    media: '(max-width: 639px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 640px) and (max-width: 959px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 960px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({

media: '(max-width: 639px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

media: '(min-width: 640px) and (max-width: 959px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

media: '(min-width: 960px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

Attention à ne pas oublier le .bind(this) si vous voulez accéder à l’objet ‘this’

mediaCheck({
    media: '(min-width: 960px)',
    entry: function () {
        this.footerHeight = this._getFooterHeight();
    }.bind(this)
});

mediaCheck({

media: '(min-width: 960px)',

entry: function () {

this.footerHeight = this._getFooterHeight();

}.bind(this)

});

[jQuery] Eviter la duplication d’éléments du DOM lorsqu’on utilise .each() en exploitant correctement l’objet $(this)

17/01/2023 / admin

Dans mon exemple, j’ai trois containers <div class="payment-method" /> qui sont présents dans le DOM. Chacun de ces containers possède son propre bouton. Je cherche à ajouter un seul nouveau bouton dans chaque container qui n’est pas tout-à-fait un clone de celui qui existe déjà, mais qui en reprend le code HTML enfant.

Problème: avec le code ci-dessous, les trois boutons que j’ajoute sont créés une fois dans chaque container. En d’autres termes, je me retrouve avec quatre boutons (au lieu de deux) dans chaque container.

$(".payment-method").each(function(e) {
    let $this = $(this);
    let placeOrderBtn = $("button.checkout", $this);
    let placeOrderBtnHtml = placeOrderBtn.html();

    $('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this);
});

$(".payment-method").each(function(e) {

let $this = $(this);

let placeOrderBtn = $("button.checkout", $this);

let placeOrderBtnHtml = placeOrderBtn.html();

$('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this);

});

Solution: le souci provient d’une mauvaise utilisation de $(this) en combinaison de .each(). Ci-dessous le code qui me donne le résultat attendu:

$(".payment-method").each(function(index, element) {
    let $this = $(this);
    let placeOrderBtn = $this.find("button.checkout");
    let placeOrderBtnHtml = placeOrderBtn.html();
    let actionsToolbar = $this.find('.actions-toolbar');

    $('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar);
});

$(".payment-method").each(function(index, element) {

let $this = $(this);

let placeOrderBtn = $this.find("button.checkout");

let placeOrderBtnHtml = placeOrderBtn.html();

let actionsToolbar = $this.find('.actions-toolbar');

$('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar);

});

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

26/10/2018 / admin

Markup HTML de départ:

<ul>
    <li>
        <ul class="cd-secondary-dropdown">
            <li class="col-0"></li>
            <li class="col-0"></li>
            <li class="col-1"></li>
            <li class="col-1"></li>
            <li class="col-1"></li>
            <li class="col-2"></li>
            <li class="col-3"></li>
            <li class="col-3"></li>
            <li class="col-3"></li>
        </ul>
    </li>
    [...]
</ul>

<ul>

<li>

</ul>

</li>

[...]

</ul>

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é:

<ul>
    <li>
        <ul class="cd-secondary-dropdown">
            <li class="custom-cols custom-cols-4">
                <ul class="custom-col">
                    <li class="col-0"></li>
                    <li class="col-0"></li>
                </ul>
                <ul class="custom-col">
                    <li class="col-1"></li>
                    <li class="col-1"></li>
                    <li class="col-1"></li>
                </ul>
                <ul class="custom-col">
                    <li class="col-2"></li>
                </ul>
                <ul class="custom-col">
                    <li class="col-3"></li>
                    <li class="col-3"></li>
                    <li class="col-3"></li>
                </ul>
            </li>
        </ul>
    </li>
    [...]
</ul>

<ul>

<li>

</ul>

</ul>

</ul>

</ul>

</li>

</ul>

</li>

[...]

</ul>

jQuery:

// Pour chaque Univers...
$('.cd-secondary-dropdown').each(function(){
    var $this = $(this);
    var $col = $this.find('li[class*="col-"]');
    // Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...)
    var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10);

    // Stocker les classes de chaque <li class="col-*"> dans un tableau
    var classesNames = [];
    $col.each(function(){
        var attrClass = $(this).attr('class');
        classesNames.push(attrClass);
    });

    // Parmi les classes stockées, supprimer les doublons
    var uniqueClassesNames = [];
    $.each(classesNames, function(i, el){
        if($.inArray(el, uniqueClassesNames) === -1) uniqueClassesNames.push(el);
    });

    // Rassembler tous les <li> ayant des classes strictement similaires dans des <ul>
    $.each(uniqueClassesNames, function(index, value) {
        $this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />');
    });

    // Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher
    $this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />');
});

// Pour chaque Univers...

$('.cd-secondary-dropdown').each(function(){

var $this = $(this);

var $col = $this.find('li[class*="col-"]');

// Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...)

var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10);

// Stocker les classes de chaque <li class="col-*"> dans un tableau

var classesNames = [];

$col.each(function(){

var attrClass = $(this).attr('class');

classesNames.push(attrClass);

});

// Parmi les classes stockées, supprimer les doublons

var uniqueClassesNames = [];

$.each(classesNames, function(i, el){

if($.inArray(el, uniqueClassesNames) === -1) uniqueClassesNames.push(el);

});

// Rassembler tous les <li> ayant des classes strictement similaires dans des <ul>

$.each(uniqueClassesNames, function(index, value) {

$this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />');

});

// Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher

$this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />');

});

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)

// Pour chaque Univers...
$('.cd-secondary-dropdown').each(function(){
    var $this = $(this);
    var $col = $this.find('li[class*="col-"]');
    // Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...)
    var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10);

    // Stocker les classes de chaque <li class="col-*"> dans un tableau (en supprimant immédiatement les doublons)
    var classesNames = [];
    $col.each(function(){
        var attrClass = $(this).attr('class');
        if($.inArray(attrClass, classesNames) === -1) classesNames.push(attrClass);
    });

    // Rassembler tous les <li> ayant des classes strictement similaires dans des <ul>
    $.each(classesNames, function(index, value) {
        $this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />');
    });

    // Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher
    $this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />');
});

// Pour chaque Univers...

$('.cd-secondary-dropdown').each(function(){

var $this = $(this);

var $col = $this.find('li[class*="col-"]');

// Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...)

var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10);

// Stocker les classes de chaque <li class="col-*"> dans un tableau (en supprimant immédiatement les doublons)

var classesNames = [];

$col.each(function(){

var attrClass = $(this).attr('class');

if($.inArray(attrClass, classesNames) === -1) classesNames.push(attrClass);

});

// Rassembler tous les <li> ayant des classes strictement similaires dans des <ul>

$.each(classesNames, function(index, value) {

$this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />');

});

// Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher

$this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />');

});

LESS:

.cd-secondary-dropdown {
  padding: 20px 20px 0 0;
  .custom-cols {
    .custom-col {
      float: left;
      padding-left: 20px;
    }
    &-1 {
      .custom-col {
        width: 100%;
      }
    }
    &-2 {
      .custom-col {
        width: 50%;
      }
    }
    &-3 {
      .custom-col {
        width: 33.33333%;
      }
    }
    &-4 {
      .custom-col {
        width: 25%;
      }
    }
    &-5 {
      .custom-col {
        width: 20%;
      }
    }
    &-6 {
      .custom-col {
        width: 16.66666%;
      }
    }
  }
}

.cd-secondary-dropdown {

padding: 20px 20px 0 0;

.custom-cols {

.custom-col {

float: left;

padding-left: 20px;

}

&-1 {

.custom-col {

width: 100%;

}

&-2 {

.custom-col {

width: 50%;

}

&-3 {

.custom-col {

width: 33.33333%;

}

&-4 {

.custom-col {

width: 25%;

}

&-5 {

.custom-col {

width: 20%;

}

&-6 {

.custom-col {

width: 16.66666%;

}

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

06/07/2018 / admin

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

<ul>
    <li class="left-stack"></li>
    <li class="left-stack"></li>
    <li class="left-stack"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul>

</ul>

var leftStackOuterHeight = 0;
$('.left-stack').each(function () {
    leftStackOuterHeight += $(this).outerHeight();
});

var leftStackOuterHeight = 0;

$('.left-stack').each(function () {

leftStackOuterHeight += $(this).outerHeight();

});

…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

22/06/2018 / admin

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

      function addHeaderTopRowLinksToMegadropdownXS() {
        var headerHorizontalNav01 = [];
        $cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown');

        $('.yCmsComponent', '#page-header').each(function(){
            headerHorizontalNav01.push($(this).html());
        });

        $.each(headerHorizontalNav01, function(i) {
            $('<li class="has-children">'+headerHorizontalNav01[i]+'</li>')
                .appendTo($cdDropdownContent);
        });
      }

function addHeaderTopRowLinksToMegadropdownXS() {

var headerHorizontalNav01 = [];

$cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown');

$('.yCmsComponent', '#page-header').each(function(){

headerHorizontalNav01.push($(this).html());

});

$.each(headerHorizontalNav01, function(i) {

$('<li class="has-children">'+headerHorizontalNav01[i]+'</li>')

.appendTo($cdDropdownContent);

});

}

[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

15/01/2018 / admin

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

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

var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

1 2	var optionTexts = []; $("ul li").each(function() { optionTexts.push($(this).text()) });

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

var colours = ['red', 'green', 'blue'];
$('.box').each(function(index, element) {
  $(element).addClass(colours[index % colours.length]);
});

var colours = ['red', 'green', 'blue'];

$('.box').each(function(index, element) {

$(element).addClass(colours[index % colours.length]);

});

Exemple:

Code:

<table id="relatedProductsTable" class="product-features-table is-full-width" tal:define="headerLine php: templateManager.getHeaderTable(lines[0])">
	<thead>
		<tr>
			<th tal:repeat="columnTitle headerLine">${columnTitle}</th>
		</tr>
	</thead>
	<tbody>
		<tr tal:define="lines php:templateManager.getLineTable(lines, product)" tal:repeat="line lines">
			<td data-title="" tal:repeat="value line">
				${value}
			</td>
		</tr>
	</tbody>
</table>

<thead>

<tr>

<th tal:repeat="columnTitle headerLine">${columnTitle}</th>

</tr>

</thead>

<tbody>

${value}

</td>

</tr>

</tbody>

</table>

var relatedProductsTableHeadings = [];
$('#relatedProductsTable thead tr th').each(function() {
  relatedProductsTableHeadings.push($(this).text())
});

$('#relatedProductsTable tbody tr td').each(function(index,element) {
  $(element).attr('data-title', relatedProductsTableHeadings[index % relatedProductsTableHeadings.length]);
});

var relatedProductsTableHeadings = [];

$('#relatedProductsTable thead tr th').each(function() {

relatedProductsTableHeadings.push($(this).text())

});

$('#relatedProductsTable tbody tr td').each(function(index,element) {

$(element).attr('data-title', relatedProductsTableHeadings[index % relatedProductsTableHeadings.length]);

});

Résultat dans le DOM:

<table id="relatedProductsTable" class="product-features-table is-full-width">
							<thead>
								<tr>
									<th>Bearing 1</th><th>Nut</th><th>Lock washer</th><th>Feltstrips (optional)</th>								</tr>
							</thead>
							<tbody>
								<tr>
									<td data-title="Bearing 1">
										22220									</td><td data-title="Nut">
										KM 20									</td><td data-title="Lock washer">
										MB 20									</td><td data-title="Feltstrips (optional)">
										9x7,5x428									</td>								</tr>							</tbody>
						</table>

<thead>

<tr>

<th>Bearing 1</th><th>Nut</th><th>Lock washer</th><th>Feltstrips (optional)</th> </tr>

</thead>

<tbody>

<tr>

22220 </td><td data-title="Nut">

KM 20 </td><td data-title="Lock washer">

MB 20 </td><td data-title="Feltstrips (optional)">

9x7,5x428 </td> </tr> </tbody>

</table>

[jQuery] Utiliser la fonction each

03/03/2016 / admin

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 :

<form action="">
  <ol>
    <li>
      <input type="checkbox" id="">
      <label for=""></label>
      <span class="checkbox-wrapper"></span>
    </li>
    <li>
      <input type="checkbox" id="">
      <label for=""></label>
      <span class="checkbox-wrapper"></span>      
    </li>
  </ol>
</form>

<ol>

<li>

</li>

<li>

</li>

</ol>

</form>

Code HTML voulu :

<form action="">
  <ol>
    <li>
      <label for=""></label>
      <span class="checkbox-wrapper">
        <input type="checkbox" id="">        
      </span>
    </li>
    <li>
      <label for=""></label>
      <span class="checkbox-wrapper">
        <input type="checkbox" id="">        
      </span>
    </li>
  </ol>
</form>

<ol>

<li>

</span>

</li>

<li>

</span>

</li>

</ol>

</form>

Code jQuery nécessaire :

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('form ol li').each(function(){
      jQuery(this).children('input[type="checkbox"]').prependTo(jQuery(this).children('.checkbox-wrapper'));
    });
  });
</script>

jQuery(document).ready(function(){

jQuery('form ol li').each(function(){

jQuery(this).children('input[type="checkbox"]').prependTo(jQuery(this).children('.checkbox-wrapper'));

});

</script>

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

31/07/2015 / admin

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

$color-0:  #00519e;
$color-1:  #87c3e7;
$color-2:  #266f82;
$color-3:  #2b81a7;
$color-4:  #00a5cc;
$color-5:  #89c1d7;
$color-6:  #9caeab;
$color-7:  #4a668e;
$color-8:  #00889d;
$color-9:  #00a599;
$color-10: #c2b580;
$color-11: #635a60;
$color-12: #635a60;

$color-0: #00519e;

$color-1: #87c3e7;

$color-2: #266f82;

$color-3: #2b81a7;

$color-4: #00a5cc;

$color-5: #89c1d7;

$color-6: #9caeab;

$color-7: #4a668e;

$color-8: #00889d;

$color-9: #00a599;

$color-10: #c2b580;

$color-11: #635a60;

$color-12: #635a60;

$i: 0;
@each $num in $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6, $color-7, $color-8, $color-9, $color-10, $color-11, $color-12 {
  strong.color-#{$i} {
    .arrow {
      color: #{$num};
    }
  }
  $i: $i + 1;
}

$i: 0;

@each $num in $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6, $color-7, $color-8, $color-9, $color-10, $color-11, $color-12 {

strong.color-#{$i} {

.arrow {

color: #{$num};

}

$i: $i + 1;

}

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

29/11/2012 / admin

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

jQuery(document).ready(function(){
    jQuery('.contact-filter option:selected').each(function(){
        jQuery(this).text(jQuery(this).parents('select').prev('label').text());
    });    
});

jQuery(document).ready(function(){

jQuery('.contact-filter option:selected').each(function(){

jQuery(this).text(jQuery(this).parents('select').prev('label').text());

});

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

Articles récents

Catégories

Archives

Méta

Étiquette : each

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

Attention à ne pas oublier le .bind(this) si vous voulez accéder à l’objet ‘this’

[jQuery] Eviter la duplication d’éléments du DOM lorsqu’on utilise .each() en exploitant correctement l’objet $(this)

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

Markup HTML de départ:

Markup HTML d’arrivée souhaité:

jQuery:

LESS:

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

[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

[jQuery] Utiliser la fonction each

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

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