Заменить атрибуты заголовка изображения на указанных c классах в jQuery

Question

Я пытаюсь поменять атрибут заголовка на всех изображениях на странице, которые содержат строку slide в имени класса. Имена классов изображений различаются и сопровождаются уникальной строкой цифр c (например: slide-1234, slider-4321), поэтому важно, чтобы она просто содержала строку slide. Я хочу заменить его заголовком поста WordPress. Вот мой код (не работает)

<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>

Очень просто, но, к сожалению, не работает. Я использовал alert для отладки и смог напечатать заголовок, но проблема заключается в селекторе.

Вот HTML

<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
    <div id="metaslider_container_1572">
        <div id="metaslider_1572">
            <ul aria-live="polite" class="slides">
                <li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
            </ul>
        </div>

    </div>
</div>

Answer 1

Я считаю, что ваш скрипт работает до полной загрузки DOM. Вы можете разместить код скрипта внизу тега body ИЛИ , попробуйте обернуть ваш код $(document).ready(function(){...}).

.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var title = 'someTitle';
    $('img[class*=slide-]').attr('title', title);
  });
</script>

<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
    <div id="metaslider_container_1572">
        <div id="metaslider_1572">
            <ul aria-live="polite" class="slides">
                <li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
            </ul>
        </div>

    </div>
</div>