Find the index position of a selected element in a list via Snapshots

You may want to know the position of an element in a list or grid that users are selecting. Use this snapshot template to capture the index position of the element that has been selected.

🚧

The Javascript below will not work as-is since some of the selectors must be customized to correctly match your site. Do not copy/paste this as-is. This is for conceptual example purposes only.

Name: Tile Position
Javascript Snapshot:

(function() {
    var selector = 'li.h-full' // Replace this CSS! Selector must target all of the elements in the list
    var selected_element = event.target.closest(selector)
    var all_elements = document.querySelectorAll(selector)
    return Array.prototype.indexOf.call(all_elements, selected_element);
})()