JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class='wrap'>
  <ul class='carousel is-set'>
    <li class='carousel-seat first-sibling'>
      <h2>1</h2>
    </li>
    <li class='carousel-seat second-sibling'>
      <h2>2</h2>
    </li>
    <li class='carousel-seat third-sibling'>
      <h2>3</h2>
    </li>
    <li class='carousel-seat forth-sibling'>
      <h2>4</h2>
    </li>
    <li class='carousel-seat fifth-sibling'>
      <h2>5</h2>
    </li>
    <li class='carousel-seat is-ref'>
      <h2>6</h2>
    </li>
  </ul>
</div>
<div class='controls'>
  <button class='toggle'>Prev</button>
  <button class='toggle' data-toggle='next'>Next</button>
</div>

Babel + JSX

let seats = [...document.querySelectorAll(".carousel-seat")];


class ArrayExtension extends Array {
  constructor(...args) {
    super(...args);
  }
  sum() {
    let total = 0;
    for (let i = 0; i < this.length; i++) {
      total += this[i];
    }

    return total;
  }
  first() {
    return this.find(Boolean);
  }

  last() {
    return this[this.length - 1];
  }
  average() {
    return this.sum() / this.length;
  }
  range() {
    var self = this.sort();
    return {
      min: self[0],
      max: self[this.length - 1]
    };
  }
}

// console.log(seats.find(Boolean));
// console.log(seats[seats.length - 1]);

const myArray = ArrayExtension.from(document.querySelectorAll(".carousel-seat"));
console.log(myArray.average());

seats.forEach(function(element, index) {
  console.log(element);
});