Кажется очевидным, но я не могу найти решение. У меня есть пара Div с тем же классом, и когда вы наводите на них курсор, я хочу знать, какой из них вы точно навели, в качестве значения позиции NodeList.

HTML

<div id="summary">

    <div class="articles"></div>
    <div class="articles"></div>
    <div class="articles"></div>
    <div class="articles"></div>
    <div class="articles"></div>
    <div class="articles"></div>
    <div class="articles"></div>

</div>

JS

let articles = document.querySelectorAll(".articles");

    for (let x of articles) {

        x.addEventListener('mouseenter', (e) => {

            p = Exact Position in Nodelist??
    
            console.log(articles[p]);

        });
    }

Спасибо.

1
ZBop 9 Окт 2021 в 19:29

3 ответа

Лучший ответ

Вот простое решение, которое я придумал:

let articles = document.querySelectorAll(".articles");

for (let [position, article] of articles.entries()) {
 
  article.addEventListener('mouseenter', (e) => {
    
    console.log(position) // Exact Position in Nodelist
    console.log(articles[position]) // The Node hovered

  });

}

Надеюсь, моя помощь будет полезна.

1
Kevin Hansen 9 Окт 2021 в 16:53

Вы должны взять дочерние элементы родительского узла и найти его индекс, как показано ниже.

Попробуй это

let articles = document.querySelectorAll(".articles");

for (let x of articles) {
  x.addEventListener("mouseenter", (e) => {
    console.log([...e.target.parentNode.children].indexOf(e.target));
  });
}

Code sandbox => https://codesandbox.io/s/young-frost-x6u1x?file=/src/index.js

0
Amila Senadheera 9 Окт 2021 в 16:46

Вы можете использовать наведение указателя мыши на родителя, таким образом вы добавите только одного слушателя:

let articles = document.querySelectorAll(".articles");
var summary = document.getElementById("summary");
summary.addEventListener("mouseover", (e) => {
  if (e.target.classList.contains("articles")) {
    let position = Array.from(e.target.parentNode.children).indexOf(e.target);
    console.log(position,articles[position]);
  }
});
.articles {
  width: 100px;
  height: 100px;
  border: solid 1px red;
}
<div id="summary">

  <div class="articles">a</div>
  <div class="articles">b</div>
  <div class="articles">c</div>
  <div class="articles">d</div>
  <div class="articles">e</div>
  <div class="articles">f</div>
  <div class="articles">g</div>

</div>
0
Gabriel 9 Окт 2021 в 16:58