Replace image title attributes on specific classes in jQuery

Question

I'm trying to swap out the title attribute on all images on the page that contain the string slide in the class name. The image class names vary and are followed by a unique numeric string (ex: slide-1234, slider-4321) so it's important it just contains the string slide. I want to replace it with the WordPress post title. Here is my code so far (doesn't work)

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

Very simple, but unfortunately doesn't work. I used alert to debug and was able to print the title, but the selector is the issue.

Here's the 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>

Have you tried debugging in the console to check what is returned after using `$('img[class*=slide]')` and then if `$('img[class*=slide]').attr('title', 'anything here');` worked or not? — palaѕн, Feb 20 '20 at 16:49
Or just `console.log($('img[class*=slide]').length)` and see if it's > 0... I would suggest just adding a class "slide" to those images you want to target. Then you could just use `$('.slide')`... — Heretic Monkey, Feb 20 '20 at 16:49
your code looks correct. just ensure your script comes __after__ your html — japrescott, Feb 20 '20 at 16:50

Mamun · Accepted Answer · 2020-02-20T17:04:03.753

4

I believe your script is running before the DOM is fully loaded. You can either place the script code at the bottom of the body tag OR try wrapping your code with $(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>

edited Feb 20 '20 at 17:04

answered Feb 20 '20 at 16:51

Mamun

66,969
9
47
59

1

That was it. Thank you! – Chris McGlade Feb 20 '20 at 16:53
1

Be advised that if you were to use, for example, `class="some-class slider-4321"` the starts with selector will not work. See [this](https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names) for a solution. – Rob Moll Feb 20 '20 at 16:59
1

@Mamun thats what I had expected – japrescott Feb 20 '20 at 16:59
1

@ChrisMcGlade If this is the correct answer, please tick it so that this answer gets marked as the correct answer. Its a good motivation for these people who help as well as gets their efforts recognized. – Gosi Feb 20 '20 at 17:06

Replace image title attributes on specific classes in jQuery

1 Answers1