JSFiddle - React, Tailwind, and code Playground

Facepile Playground 2

by Ttt Yyy

HTML

<div class='more'>
  Content Above
  </div>
<ul class='container' id='facepile'>
  <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
  <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
    <li>
    <a class='item' href='#'>
      <img src='#' />
    </a>
  </li>
  
</ul>
<div class='clearfix' />
<div class='more'>
  Content Below
</div>
<div id='console'>
 
</div>

CSS

.more {
  background-color: #eee;
  padding: 10px;
}

.container {
 /*  display: flex;
  flex-wrap: wrap; */
  width: 150px;
  margin: -2px 0 0 0;
  padding: 0;
  list-style: none;
}

.container li {
  line-height: 0;
  margin-top: 2px;
  margin-right: 2px;
  /* list-style: none; */
  float: left;
}

.clearfix {
  clear: both;
}

.container img {
  width: 30px;
  height: 30px;
}

JavaScript

/* let facepile = document.getElementsByClassName('facepile')[0]; */

/* let facepile = document.getElementById('facepile')
let console = document.getElementById('console');

facepile.addEventListener('click', e => {
  let target = e.target;
  
  while(target.tagName !== 'LI') {
    target = target.parentNode;
  }
  
  let index = 0;
  
  while(target.previousSibling) {
    if(target.tagName === 'LI') {
      index++;  
    }
    target = target.previousSibling
  }
  console.innerHTML = index;
  
}, false); */





let items = facepile.childNodes;

let console = document.getElementById('console');
/* let index = 0; */
for(let i = 0; i < items.length; i++) {
/*   if(items[i].tagName === 'LI') {
    index++;
  } */
  /* let currentElementNumber = index */;
  items[i].addEventListener('click', e => {
/*     console.innerHTML = currentElementNumber; */
console.innerHTML = i;
  }) 
}