Find element in HTML and add a class with pure Javascript

Asked

Viewed 1,399 times

3

I need to locate a class called uk-slideshow inside the HTML, after locating, I need to check inside the uk-slideshow image, if you have, add a class in this img. PS: It’s more of an image. The structure of HTML that’s how it is:

<div>
<ul class="uk-slideshow">
    <li>
        imagem
    </li>
    <li>
        imagem
    </li>
</ul>

With jQuery is much more practical and would do this way:

jQuery(document).ready(function($){
$('.uk-slideshow > li img').each(function(){
    $(this).addClass("via-img-banner");
});

})

But I need to do this in JS native. I tried to do it this way: 

<script>var slide = document.getElementsByClassName("uk-slideshow").getElementsByTagName("img");slide.add("via-img-no-lazy");</script>

How could I do that? I’ll apply that to the Wordpress, I know that the jQuery would be the best option, but due to using a plugin, I will run this code directly from head.

javascript html jquery jsp

  • If you want to get all images pq does not use the direct selector in css .uk-slideshow > li > img, I didn’t understand the need to add one more class

  • 1

    I am configuring a plugin Lazy Load, in the plugin, I will insert this class so that the image is ignored.

  • Careful that this selector .uk-slideshow > li img is wrong, will not find anything, because between the div and the <li> there is a <ul>. By using the sign > you’re saying that the <li> are direct daughters of the div, which is not true. ;)

2 answers

5


You can use the addEventListenner in the document to capture when the DOM is fully loaded and after that, use the querySelectorAll to capture a list of elements using their CSS selector, iterate on these elements and add the class manually:

<script language="javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
        var imgList = document.body.querySelectorAll(".uk-slideshow > li img");
        for (let i = 0; i < imgList.length; i++) {
            imgList[i].classList.add(" via-img-banner");                
        }
    });
</script>

  • It worked! Thanks for your help!

  • Come on, anything, just ask

  • The code looks good, but there’s an error. Take a look at my comment upstairs. ;)

  • I didn’t know this classList property and I didn’t remember IE :P, thank you.

  • @Sam, it was my lack of attention. uk-slideshow class is in ul even. I fixed the question code.

4

Another way would be using .classList.add() with a for traditional, since the forEach not supported in Internet Explorer.

Note that the selector ".uk-slideshow > ul img" will fetch all tags <img> what to find inside the <ul> daughter of div.uk-slideshow:

document.addEventListener("DOMContentLoaded", function(){
   
   var imgs = document.querySelectorAll(".uk-slideshow > ul img");
   for(var x=0; x<imgs.length; x++) imgs[x].classList.add("via-img-banner");
   
});
<div class="uk-slideshow">
   <ul>
       <li>
           <img>
       </li>
       <li>
           <img>
       </li>
       <li>
       </li>
   </ul>
</div>

Browser other questions tagged javascript html jquery jsp

You are not signed in. Login or sign up in order to post.