Konwersja JQ na JS

Question

Witam potrzebuje pomocy w zminia kodu JQ na JS.

$(function () {
  $(".btn-6")
    .on("mouseenter", function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top;
      $(this).find("span").css({ top: relY, left: relX });
    })
    .on("mouseout", function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top;
      $(this).find("span").css({ top: relY, left: relX });
    });
  $("[href=#]").click(function () {
    return false;
  });
});

Poniżej wklejam swoje tłumaczenie(przestało mi działać na find)

const mouseenterBtn = function (e) {
  relX = e.pageX - this.offsetLeft;
  relY = e.pageY - this.offsetTop;


  const spanFunction = () => {
    const span = this.querySelector("span");
    return span;
  }

  spanFunction();
  console.log(this.find(spanFunction));
  // console.log(this.children.find(span));
  // console.log([0, 1, 2, 3, 4, 5].find(3));
}

btn.addEventListener("mouseenter", mouseenterBtn);

Byłbym bardzo wdzięczny za pomoc

Answer 1

przestało mi działać na find

  spanFunction();
  console.log(this.find(spanFunction));

Ten find nie ma wiele sensu?

To:

$(this).find("span")

Jest po prostu:

this.querySelector("span") // lub querySelectorAll jeśli może ich być wiele

Nie trzeba tego owijać w osobną funkcję, find() etc.

Answer 2

A babel tego nie robi z automatu?