Проверить статус загрузки аудио у всех элементов документа

112

21 ноября 2020, 19:40

<ol>
    <li>
    <span>Не готов</span>
        <audio src="TRACK" preload="metadata"></audio>
    </li>
    <li>
    <span>Не готов</span>
        <audio src="TRACK" preload="metadata"></audio>
    </li>
</ol>

На страницe находится несколько ol. Это плейлисты. У них нет ни идентификаторов, ни классов.

Как пройтись циклом по всем ol их li, проверить состояние всех audio, которые в них находятся используя readyState и если оно равно 4, то заменить текст в этом li span на готов?

Учитывая то, что плейлисты могут создаваться динамически, то проходить циклом нужно будет ежесекундно. Если это будет вызывать нагрузку, то буду проверять динамические плейлисты отдельно.

Пробую так. Возвращает undefined

$('ol li').find('audio').each(function() {
  console.info($(this).readyState);
})

Answer 1

$(this) возвращает враппер над дом элементом, а не сам элемент. а вот this внутри функции указывает на сам элемент:

$('ol li').find('audio').each(function() { 
  console.info(this.readyState); 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ol> 
    <li> 
    <span>Не готов</span> 
        <audio src="TRACK" preload="metadata"></audio> 
    </li> 
    <li> 
    <span>Не готов</span> 
        <audio src="TRACK" preload="metadata"></audio> 
    </li> 
</ol>