如何从 nodeList 中查找节点的索引

Question

我正在尝试构建一个导航，其中 nav__link 显示用户在使用 interSectionObserver 滚动时当前所在的部分。

所以我尝试 console.log() 来自 sectionArr 的 entry.target 的索引。这样我就可以查询 select 所有 .nav_link 并且可以将 active class 添加到那个 index 号码。

我这样做是因为很容易定位 nav_link 添加 class 而不是在每个 [=13= 上添加单独的 id 或 classes ] 和 section.

我尝试搜索此内容，但找不到任何相关内容。我认为，可以从 array 中找到 element 的索引，其中 element 也是 array.

的成员

谢谢。

const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');


let observer = new IntersectionObserver(detectInterSection);

observer.observe(firstSection)


function detectInterSection(entries) {
    entries.forEach(entry => {
        console.log(entry.target)
        // console.log(sectionArr.findIndex(entry.target)); // trying to console log the index of entry.target in sectioArr
    })
}

* {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.header {
  padding: 4rem 0;
  background: #333;
}

.footer {
  background: #333;
  padding: 30px 0;
}

section {
  font-size: 24px;
  background: #b78ee6;
  height: 48vh;
  padding: 80px 0;
}

section:nth-child(even) {
  background: #333e48;
  height: 90vh;
}

.scroll-wrapper {
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  width: 12px;
  z-index: 99;
  cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
  height: 100vh;
  position: relative;
  width: 100%;
}
.scroll-wrapper .scroll-thumb {
  width: 16px;
  background: #666;
  will-change: top;
  position: absolute;
  left: 0;
  top: 0;
}
.intersection {
  position: fixed;
  background: #333;
  width: 300px;
  right: 32px;
  top: 0;
  padding: 32px;
  z-index: 88;
  border-radius: 10px;
  top: 200px;
}
.intersection a {
  color: #fff;
}

.content {
  position: relative;
}

.is--active {
  color: #b78ee6;
}

<div class="scroll-wrapper">
    <div class="scroll-thumb-wrapper">
        <div class="scroll-thumb"></div>
    </div>
</div>
<header class="header">
    <div class="container">
        header
    </div>
</header>
<main class="content">
    <aside class="intersection">
        <ul>
              <li><a href="javascript:void(0)" class="sidebar__link">first</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">second</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">third</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fourth</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fiveth</a></li>
        </ul>
    </aside>
    <section class="section section--first" style="position: relative">
        <div class="container">
            first seciton
        </div>
    </section>
    <section id="apple " class="section">
        <div class="container">
            second seciton
        </div>
    </section>
    <section class="section">
        <div class="container">

            third seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            fourth seciton
        </div>
    </section>
    <section id="section" class="section">
        <div class="container">
            fifeth seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            last seciton
        </div>
    </section>
</main>
<footer class="footer">
    <div class="container"> footer</div>
</footer>

Answer 1

Array.findIndex() 将函数作为参数来查找元素。

const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');


let observer = new IntersectionObserver(detectInterSection);

observer.observe(firstSection)


function detectInterSection(entries) {
    entries.forEach(entry => {
        const targetSectionIndex = sectionArr.findIndex(section => entry.target.id === section.id); 
        console.log('targetSectionIndex', targetSectionIndex);
        const targetSection = sectionArr[targetSectionIndex];
        console.log('targetSection', targetSection);
    })
}

* {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.header {
  padding: 4rem 0;
  background: #333;
}

.footer {
  background: #333;
  padding: 30px 0;
}

section {
  font-size: 24px;
  background: #b78ee6;
  height: 48vh;
  padding: 80px 0;
}

section:nth-child(even) {
  background: #333e48;
  height: 90vh;
}

.scroll-wrapper {
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  width: 12px;
  z-index: 99;
  cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
  height: 100vh;
  position: relative;
  width: 100%;
}
.scroll-wrapper .scroll-thumb {
  width: 16px;
  background: #666;
  will-change: top;
  position: absolute;
  left: 0;
  top: 0;
}
.intersection {
  position: fixed;
  background: #333;
  width: 300px;
  right: 32px;
  top: 0;
  padding: 32px;
  z-index: 88;
  border-radius: 10px;
  top: 200px;
}
.intersection a {
  color: #fff;
}

.content {
  position: relative;
}

.is--active {
  color: #b78ee6;
}

<div class="scroll-wrapper">
    <div class="scroll-thumb-wrapper">
        <div class="scroll-thumb"></div>
    </div>
</div>
<header class="header">
    <div class="container">
        header
    </div>
</header>
<main class="content">
    <aside class="intersection">
        <ul>
              <li><a href="javascript:void(0)" class="sidebar__link">first</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">second</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">third</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fourth</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fiveth</a></li>
        </ul>
    </aside>
    <section class="section section--first" style="position: relative">
        <div class="container">
            first seciton
        </div>
    </section>
    <section id="apple " class="section">
        <div class="container">
            second seciton
        </div>
    </section>
    <section class="section">
        <div class="container">

            third seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            fourth seciton
        </div>
    </section>
    <section id="section" class="section">
        <div class="container">
            fifeth seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            last seciton
        </div>
    </section>
</main>
<footer class="footer">
    <div class="container"> footer</div>
</footer>

如何从 nodeList 中查找节点的索引

How to find the index of a node from nodeList

javascript

arrays

indexof