siblings – devfrontend.info

Source : jQuery find next/prev elements of a certain class but not necessarily siblings (EDIT 3).

Les méthodes next, prev, nextAll et prevAll sont très utiles pour parcourir le DOM à la recherche d’un ou plusieurs éléments frères d’un élément situé dans le même parent. Mais comment procéder si l’élément suivant ou précédent qu’on cherche à cibler se situe à l’extérieur de l’élément parent propre à notre élément de départ ?

Dans l’exemple suivant, je cherche à atteindre la classe .to-find-this en partant de l’ID #start-from-here.

<div><span id="start-from-here">hello</span></div>
<div><p class="to-find-this">world></p></div>

1 2	<div><span id="start-from-here">hello</span></div> <div><p class="to-find-this">world></p></div>

Cette action est rendue possible grâce aux fonctions jQuery suivantes :

$.fn.findNextAll = function( selector ){
  var that = this[ 0 ],
    selection = $( selector ).get();
  return this.pushStack(
    !that && selection || $.grep( selection, function(n){
       return that.compareDocumentPosition(n) & (1<<2);
       // if you are looking for previous elements it should be & (1<<1);
    })
  );
}
$.fn.findNext = function( selector ){
  return this.pushStack( this.findNextAll( selector ).first() );
}

$.fn.findNextAll = function( selector ){

var that = this[ 0 ],

selection = $( selector ).get();

return this.pushStack(

!that && selection || $.grep( selection, function(n){

return that.compareDocumentPosition(n) & (1<<2);

// if you are looking for previous elements it should be & (1<<1);

})

);

}

$.fn.findNext = function( selector ){

return this.pushStack( this.findNextAll( selector ).first() );

}

Je peux désormais cibler la classe .to-find-this en partant de l’ID #start-from-here avec la déclaration suivante :

$('#start-from-here').findNext('.to-find-this');

1	$('#start-from-here').findNext('.to-find-this');

L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.

Markup HTML:

<div class="process-steps">
  <ol>
    <li>
      <span class="label">Etape #1</span>
    </li>
    <li class="current">
      <span class="label">Etape #2</span>
    </li>
    <li>
      <span class="label">Etape #3</span>
    </li>
    <li>
      <span class="label">Etape #4</span>
    </li>
  </ol>
</div>

<ol>

<li>

Etape #1

</li>

Etape #2

</li>

<li>

Etape #3

</li>

<li>

Etape #4

</li>

</ol>

</div>

SASS:

.process-steps ol{
  display: table;
  table-layout: fixed;
  width: 100%;
  font-size: rem(18);
  text-transform: uppercase;
  li{
    position: relative;
    display: table-cell;
    text-align: center;
    &::before,
    &::after{
      position: absolute;
      z-index: 1;
      display: inline-block;
      content: "";
      width: 50%;
      height: 2px;
      bottom: 0;
      background-color: #000;
    }
    &::before{
      left: 0;
    }
    &::after{
      right: 0;
    }
    .label{
      display: block;
      padding-bottom: $grid-gutter-width / 2;
      color: $corporate-color-one;
      &::after{
        position: absolute;
        z-index: 2;
        left: calc(50% - 10px);
        bottom: -9px;
        display: inline-block;
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: $corporate-color-one;
      }
    }
    &.current{
      &::before{
        background-color: #000;
      }
      &::after{
        background-color: $site-font-color-light;
      }
      .label{
        color: $corporate-color-one;
        &::after{
          background-color: $corporate-color-one;
        }
      }
    }
    &.current ~ li{
      &::before,
      &::after{
        background-color: $site-font-color-light;
      }
      .label{
        color: $site-font-color-light;
        &::before,
        &::after{
          background-color: $site-font-color-light;
        }
      }
    }
  }
}

.process-steps ol{

display: table;

table-layout: fixed;

width: 100%;

font-size: rem(18);

text-transform: uppercase;

li{

position: relative;

display: table-cell;

text-align: center;

&::before,

&::after{

position: absolute;

z-index: 1;

display: inline-block;

content: "";

width: 50%;

height: 2px;

bottom: 0;

background-color: #000;

}

&::before{

left: 0;

}

&::after{

right: 0;

}

.label{

display: block;

padding-bottom: $grid-gutter-width / 2;

color: $corporate-color-one;

&::after{

position: absolute;

z-index: 2;

left: calc(50% - 10px);

bottom: -9px;

display: inline-block;

content: "";

width: 20px;

height: 20px;

border-radius: 50%;

background-color: $corporate-color-one;

}

&.current{

&::before{

background-color: #000;

}

&::after{

background-color: $site-font-color-light;

}

.label{

color: $corporate-color-one;

&::after{

background-color: $corporate-color-one;

}

&.current ~ li{

&::before,

&::after{

background-color: $site-font-color-light;

}

.label{

color: $site-font-color-light;

&::before,

&::after{

background-color: $site-font-color-light;

}

Autre déclinaison (responsive !)

Les mixins sont ceux de la grille Flexbox de Foundation 6.

<div class="steps">
<h1>Déclarer un arrêt de travail</h1>
<p>Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.</p>
<ol class="steps-list">
  <li class="steps-item">
    <a href="#">
      <span class="number">1</span>
      <br /><span class="label">Employeur</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">2</span>
      <br /><span class="label">Assuré</span>
    </a>
  </li>
  <li class="steps-item is-current">
    <a href="#">
      <span class="number">3</span>
      <br /><span class="label">Arrêt de travail</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">4</span>
      <br /><span class="label">Salaires</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">5</span>
      <br /><span class="label">Documents d'instruction</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">6</span>
      <br /><span class="label">Récapitulatif</span>
    </a>
  </li>
</ol>

<h1>Déclarer un arrêt de travail</h1>

Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.

1

Employeur

</a>

</li>

2

Assuré

</a>

</li>

3

Arrêt de travail

</a>

</li>

4

Salaires

</a>

</li>

5

Documents d'instruction

</a>

</li>

6

Récapitulatif

</a>

</li>

</ol>

//
// steps
$steps-item-width: 30px;

.steps {

  &-list {
    // reset
    margin: 0;
    padding: 0;
    list-style-type: none;

    position: relative;
  }

  &-item {
    position: relative;
    &::before,
    &::after {
      position: absolute;
      display: inline-block;
      content: "";
      background-color: tomato;           
    } 
    &::before {
      z-index: -2;
    }
    &::after {
      z-index: -3;      
    }
    &:last-child {
      &::before,
      &::after {
        display: none;
      }
    }
    .number {
      display: inline-block;
      width: $steps-item-width;
      height: $steps-item-width;
      line-height: $steps-item-width - 4;
      text-align: center;
      border-radius: 50%;
      border: 3px solid tomato;
      color: tomato;
      background: #fff;
    }
    &.is-current {
      &::after {
        background-color: black;
      }
    }
    &.is-current ~ li {
      &::before {
        display: none;
      }
      &::after {
        background-color: black;
      }
      .number {
        line-height: $steps-item-width;
        border: 1px solid black;
        color: black;
        &::after {
          background-color: black;
        }
      }
    }            
  }

  @include breakpoint(medium down) {
    &-list {
      @include flex-direction(
        $direction: column);
    }
    &-item {
      br {
        display: none;
      }
      &::before,
      &::after {
        left: ($steps-item-width/2) - 1;
        width: 3px;
      }
      &::before {
        height: $steps-item-width + 5;
      }
      &::after {
        height: 100%;        
      }
      .number {
        margin-bottom: $steps-item-width/2;
      }
    }
  }

  @include breakpoint(large) {
    &-list {
      @include flex-grid-row(
        $behavior: collapse,
        $columns: extend,
        $gutters: 0);
    }
    &-item {
      @include flex-grid-column(
        $gutters: 0);
      &::before,
      &::after {
        top: ($steps-item-width/2) - 1;
        height: 3px;
      }
      &::before  {
        width: $steps-item-width + 10;
        left: 0;
      }
      &::after {
        width: 100%;
        right: 0;
      }
      .number {
        position: absolute;
        z-index: -1;
        left: calc(50% - ($steps-item-width/3));
      }
      &.is-current {
        &::after {
          top: ($steps-item-width/2);
          height: 1px;
        }
      }
      &.is-current ~ li {
        &::after {
          top: ($steps-item-width/2);
          height: 1px;
        }
      }
    }
  }
}
// end: steps

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

// steps

$steps-item-width: 30px;

.steps {

&-list {

// reset

margin: 0;

padding: 0;

list-style-type: none;

position: relative;

}

&-item {

position: relative;

&::before,

&::after {

position: absolute;

display: inline-block;

content: "";

background-color: tomato;

}

&::before {

z-index: -2;

}

&::after {

z-index: -3;

}

&:last-child {

&::before,

&::after {

display: none;

}

.number {

display: inline-block;

width: $steps-item-width;

height: $steps-item-width;

line-height: $steps-item-width - 4;

text-align: center;

border-radius: 50%;

border: 3px solid tomato;

color: tomato;

background: #fff;

}

&.is-current {

&::after {

background-color: black;

}

&.is-current ~ li {

&::before {

display: none;

}

&::after {

background-color: black;

}

.number {

line-height: $steps-item-width;

border: 1px solid black;

color: black;

&::after {

background-color: black;

}

@include breakpoint(medium down) {

&-list {

@include flex-direction(

$direction: column);

}

&-item {

br {

display: none;

}

&::before,

&::after {

left: ($steps-item-width/2) - 1;

width: 3px;

}

&::before {

height: $steps-item-width + 5;

}

&::after {

height: 100%;

}

.number {

margin-bottom: $steps-item-width/2;

}

@include breakpoint(large) {

&-list {

@include flex-grid-row(

$behavior: collapse,

$columns: extend,

$gutters: 0);

}

&-item {

@include flex-grid-column(

$gutters: 0);

&::before,

&::after {

top: ($steps-item-width/2) - 1;

height: 3px;

}

&::before {

width: $steps-item-width + 10;

left: 0;

}

&::after {

width: 100%;

right: 0;

}

.number {

position: absolute;

z-index: -1;

left: calc(50% - ($steps-item-width/3));

}

&.is-current {

&::after {

top: ($steps-item-width/2);

height: 1px;

}

&.is-current ~ li {

&::after {

top: ($steps-item-width/2);

height: 1px;

}

// end: steps

Articles récents

Catégories

Archives

Méta

Étiquette : siblings

[jQuery] Parcourir le DOM à la recherche d’un élément suivant ou précédent, mais qui n’est pas nécessairement frère de l’élément de départ

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

Autre déclinaison (responsive !)

[CSS] Cibler le premier élément d’une liste qui possède une certaine classe parmi ses frères.