how can I get the the li specific to a ul if i have more than one ul and all the li have same classname

Question

I want all the li in each ul arranged in this form 0px,200px,400px,etc.. depending on the number of li inside that specific ul . My codes joins it up this way 0px,200px,400px,600px,800px,notice from 600px the li is in another ul i want it also starting from 0px,200px in that format. How can I achieve this?

 var slider = document.getElementsByClassName('slider'); var slide = document.getElementsByClassName('slide'); var art = document.getElementsByTagName('article'); var child = [], slideWidth = 200; for (var i = 0; i < art.length; i++) { art[i].addEventListener('mouseover', function(event) { getslide(event) }) } function getslide(event) { for (var i = 0; i < slide.length; i++) { let elem = event.target.getAttribute('data'); if (slide[i].getAttribute('data') != null && slide[i].getAttribute('data') == elem) { console.log(slide[i].style.left = slideWidth * i + 'px); } } }

 <article data=0> <button class="btn2">></button> <button class="btn1"> <</button> <h5 class="pricin">N20,000</h5> <ul class="slider"> <li class="slide" data=0> <img src="image-2.jpeg" alt=""> </li> <li class="slide" data=0> <img src="image-4.jpeg" alt=""> </li> <li class="slide" data=0> <img src="summer.jpg" alt=""> </li> </ul> </article> <article data=1> <button class="btn2">></button> <button class="btn1"> <</button> <h5 class="pricin">N20,000</h5> <ul class="slider"> <li class="slide" data=1> <img src="image-1.jpeg" alt=""> </li> <li class="slide" data=1> <img src="image-5.jpeg" alt=""> </li> </ul> </article>

Answer 1

Can you edit the HTML at all? I would suggest giving them a unique ID or giving them another class. Elements can have multiple classes so are not limited to just one.

You could also attempt to use parent or child selectors but you dont seem to have any unique identifiers so will be difficult to do.

Answer 2

You can use different id attributes on ul and use

var slide = document.querySelectorAll("#myId > .slide")

You can also use querySelectorAll on an element.

var slider = document.getElementById("myId")
var slide = slider.querySelectorAll(".slide")

you can always make something more or less specific by using combinations of selectors

Answer 3

Not exactly sure what you are trying to do here, probably missing css will bridge the gap, but here is a solution according to my understanding.

        var slider = document.getElementsByClassName('slider');
        var art = document.getElementsByTagName('article');
        var child = [],
          slideWidth = 200;

        for (var i = 0; i < art.length; i++) {
            art[i].addEventListener('mouseover', function(event) {
                getslide(event)
            })
        }

        function getslide(event) {
            for (var i = 0; i < slider.length; i++) {
                var slide = slider[i].getElementsByClassName('slide');
                for (var j = 0; j < slide.length; j++) {
                    let elem = event.target.getAttribute('data');
                    if (slide[j].getAttribute('data') != null && slide[j].getAttribute('data') == elem) {
                        console.log(slide[j].style.left = slideWidth * j + 'px');
                    }
                }
            }
        }

I've used two loops. First one is for the sliders and second one is for the slides inside that particular slider. Thats why I've declared var slide inside the first loop. Everytime the slider changes, the j variable will start from 0 . So your pixel count will start from 0 . Not a very elegant solution but it will work. Hope that helps. Happy coding :)