JSFiddle - React, Tailwind, and code Playground

by eelyafi

HTML

<div class="more">
    Content Above.
</div>
<ul class="facepile" id="my_facepile"><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li><li><a href="#"><img src="#" /></a></li>
</ul>
<div class="clearfix" />
<div class="more">
    Content Below.
</div>

CSS

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

.facepile {
  margin-top: -2px;
  width: 200px; /* To demonstrate arbitrary wrapping */
}

.facepile li {
  float: left;
  line-height: 0;
  margin: 2px 2px 0 0; 
}

/* Don't really care how they do clearfix, as long as they think of it. */
.clearfix {
  clear: both;
}

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

JavaScript

var facepile = $('my_facepile');

// Event delegation.
facepile.addEventListener('click', function(e) {
    var target = e.target;
    while (target.tagName !== 'LI') {
        target = target.parentNode;
    }
    var index = 0;
    while (target.previousSibling) {
        index++;
        target = target.previousSibling;
    }
    console.log(index);
}, false);

// Alternatively, loop through the children and attach individual listeners.
// Scope!
var children = facepile.childNodes;

for (var ii = 0; ii < children.length; ii++) {
    (function(index) {
        children[ii].addEventListener('click', function() {
            console.log(index);
        }, false);
    })(ii);
}