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);
})()