Find that data-index of section element that contains specific div

Question

I have a single page application that separates its pages by <section> elements. Content is being outputted dynamically from the back end. How would I loop through the application using jQuery and see the data-index of a section that contains a div element of $('.narration_audio').

Basically what I'm trying to accomplish is when ever a user comes to the page (section) that contains that div element to show the audio player in the heading. Otherwise grey out the audio player.

Answer 1

You can take a similar approach seen in How to get the data-id attribute? Using $(this).attr("data-index") or $(this).data("index")

Answer 2

Try this:

$("section").each(function() {

    var this_el = $(this);
    if (this_el.find('.narration_audio').length) {

         var the_data_index = this_el.data('index');

    }

}