Convert script from Jquery to Vanilla js

I’m in diffulty to transform this script to vanilla js. Can someone help me?

i dont understand

const $this = $(this);
parent() is like parentNode?
.find()?

//

  let swiperInstances = [];
  $(".swiper-container").each(function (index, element) {
    const $this = $(this);
    $this.addClass("instance-" + index);
    $this.parent().find(".swiper-pagination").addClass("pagination-" + index);
    $this.parent().find(".swiper-button-prev").addClass("prev-" + index);
    $this.parent().find(".swiper-button-next").addClass("next-" + index);
    swiperInstances[index] = new Swiper(".instance-" + index, {
      navigation: {
        prevEl: ".prev-" + index,
        nextEl: ".next-" + index,
      }
    });
  });

47 thoughts on “Convert script from Jquery to Vanilla js”

  1. var swiperInstances = {}; // since you don't append to it, it should be an object
    var swiperContainer = document.getElementsByClassName('swiper-container');
    var objectBuffer;
    for (var index = 0, element; element = swiperContainer[index]; index++) {
        // const $this = $(this);
        // $this.addClass("instance-" + index);
        element.classList.add('instance-' + index.toString());
    
        // $this.parent().find(".swiper-pagination").addClass("pagination-" + index);
        objectBuffer = element.partentNode.getElementsByClassName('swiper-pagination');
        if (objectBuffer.length > 0) {
            objectBuffer[0].classList.add('pagination-' + index.toString());
        }
    
        // $this.parent().find(".swiper-button-prev").addClass("prev-" + index);
        objectBuffer = element.partentNode.getElementsByClassName('swiper-button-prev');
        if (objectBuffer.length > 0) {
            objectBuffer[0].classList.add('prev-' + index.toString());
        }
    
        // $this.parent().find(".swiper-button-next").addClass("next-" + index);
        objectBuffer = element.partentNode.getElementsByClassName('swiper-button-next');
        if (objectBuffer.length > 0) {
            objectBuffer[0].classList.add('next-' + index.toString());
        }
        // unknwon code:
        swiperInstances[index] = new Swiper(".instance-" + index, {
            navigation: {
              prevEl: ".prev-" + index,
              nextEl: ".next-" + index,
            }
          });
    }
    
    Reply

Leave a Comment