Étiquette : list

[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] Simuler un élément Select à partir d’une liste HTML

01/09/2016 / admin

<div class="TriProduct">
	<span class="Filters-facets__title js-filter-title">Trier par</span>
	<ul class="Filters-facets__list">
		<li>
			<a class="nameFilter" href="">Prix</a>
		</li>
		<li>
			<a class="nameFilter selected>Nouveautés</a>
		</li>
	</ul>
	<i class="icon icon-chevron-down"></i>
</div>

<span class="Filters-facets__title js-filter-title">Trier par</span>

<li>

</li>

<li>

<a class="nameFilter selected>Nouveautés</a>

</li>

</ul>

</div>

$('.TriProduct ul.Filters-facets__list').after('<i class="icon icon-chevron-down" />');
$('.TriProduct ul.Filters-facets__list + i.icon').on('click', function(){
  $('.TriProduct ul.Filters-facets__list a.nameFilter').each(function(){
    $(this).toggleClass('is-shown');
  });
});

$('.TriProduct ul.Filters-facets__list').after('<i class="icon icon-chevron-down" />');

$('.TriProduct ul.Filters-facets__list + i.icon').on('click', function(){

$('.TriProduct ul.Filters-facets__list a.nameFilter').each(function(){

$(this).toggleClass('is-shown');

});

.TriProduct{
    position: relative;
    .Filters-facets__title,
    .Filters-facets__list{
        display: inline-block;
    }
    .Filters-facets__title{
        font-family: $corporate-font-bold;
        &:after{
            content: ":";
            display: inline-block;
            margin: 0 8px;
        }                
    }
    .Filters-facets__list{
        vertical-align: top;
        min-width: 90px;
        border-bottom: 1px solid #000;
        position: absolute;
        .nameFilter{
            position: absolute;
            display: block;
            background-color: #fff;
            padding: 0 2px;
            left: -99999em;
            text-decoration: none;
            color: $site-font-color;
            &.selected,
            &.is-shown{
                position: relative;
                left: 0;
            }
            &.selected{
                // text-decoration: underline;
            }
        }
        + .icon{
            font-size: .6rem;
            padding-left: 6px;
            position: relative;
            left: 100%;
            &:hover{
                cursor: pointer;
            }
            &:before{
                position: relative;
                top: -3px;
            }
        }
    }
}

.TriProduct{

position: relative;

.Filters-facets__title,

.Filters-facets__list{

display: inline-block;

}

.Filters-facets__title{

font-family: $corporate-font-bold;

&:after{

content: ":";

display: inline-block;

margin: 0 8px;

}

.Filters-facets__list{

vertical-align: top;

min-width: 90px;

border-bottom: 1px solid #000;

position: absolute;

.nameFilter{

position: absolute;

display: block;

background-color: #fff;

padding: 0 2px;

left: -99999em;

text-decoration: none;

color: $site-font-color;

&.selected,

&.is-shown{

position: relative;

left: 0;

}

&.selected{

// text-decoration: underline;

}

+ .icon{

font-size: .6rem;

padding-left: 6px;

position: relative;

left: 100%;

&:hover{

cursor: pointer;

}

&:before{

position: relative;

top: -3px;

}

[CSS] Forcer une liste non ordonnée (ul) à se comporter en tableau HTML avec la pseudo-classe nth-child, la propriété box-sizing et la fonction calc

27/05/2014 / admin

Nouvelle version :

Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.

Sources :

La pseudo-classe nth-child en CSS : http://css-tricks.com/useful-nth-child-recipies/,
La propriété box-sizing en CSS : http://css-tricks.com/box-sizing/,
La fonction calc en CSS : http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html

Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#">01</a></li>
  <li><a class="link" href="#">02</a></li>
  <li>03</li>
  <li>04</li>
  <li><a class="link" href="#">05</a></li>
  <li><a class="link" href="#">06</a></li>
  <li class="current"><strong>07</strong></li>
  <li><a class="link" href="#">08</a></li>    
  <li><a class="link" href="#">09</a></li>
  <li><a class="link" href="#">10</a></li>
  <li><a class="link" href="#">11</a></li>
  <!--li><a class="link" href="#">12</a></li-->    
</ul>


.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list li{
  width: 20%;    
}

.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: calc(20% + 3px);
  border-color: red; 
}

.sizes-list li:nth-child(5n+5):last-child{
  width: 20%;
  border-color: olive;
}

.sizes-list.four-columns-rows li{
  width: 25%;
}

.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: calc(25% + 3px);
  border-color: red;
}

.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
  width: 25%;
  border-color: olive;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list li.current{
  background-color: #e5e5e5;
}

/*
.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
}
*/

.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5){
  border-right-width: 0;
}

Ancienne version :

Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.

La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><strong></strong></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
</ul>


.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  width: 20%;
}

/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: 20.97%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25.97%;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list strong{
  background-color: #e5e5e5;
}

/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
  border-left-width: 3px;
}
*/

.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
  border-right-width: 0;
}

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

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

Exemple:

Code:

Résultat dans le DOM:

Générer une Map SASS

Nouvelle version :

Ancienne version :