主页 / coding / 问题 / 78207188
Accepted
erics15
Asked: 2024-03-22 23:13:56 +0800 CST

使用 TypeScript 获取照片库中图块的特定索引

  • 772

我正在尝试获取本地照片库滑块中子元素的索引。我似乎得到的索引为 0，但想实际获取幻灯片的编号。我尝试了很多事情，这是我得到的最接近的结果（大量尝试，结果只有“-1”）。任何提示将不胜感激。

HTML（来自 Elixir/Phoenix 模板）

<div id={"#{@section_id}"} phx-hook="GallerySlider" class="min-w-0">
  <div class="wrapper relative w-full">
    <i id={"left-#{@section_id}"} class="fa-solid fa-angle-left" phx-update="ignore"></i>
    <div class="carousel flex flex-row">
      <%= render_slot(@images) %>
    </div>
    <i id={"right-#{@section_id}"} class="fa-solid fa-angle-right" phx-update="ignore"></i>
  </div>
  <ul id={"dots-#{@section_id}"} class="list-inline dots"></ul>
</div>

JS/TS：

const carousel = this.el?.querySelector<HTMLElement>(".carousel")!;
const carouselChildren = carousel.children;

// Function to get the index of a child element within its parent
function getChildIndex(
  parent: string | any[] | HTMLCollection,
  child: Element,
) {
  for (let i = 0; i < parent.length; i++) {
    if (parent[i] === child) {
      return i;
    }
  }
  return -1; // Child not found
}

// Get the index of a specific child element within the carousel
const targetChild = carouselChildren[0]; // Assuming you want to find the index of the first child element
const index = getChildIndex(carouselChildren, targetChild);

console.log("Index of target child within carousel:", index);

这是控制台消息：

Index of target child within carousel: 0
javascript

2 个回答

  1. Best Answer

    正如评论中所讨论的，该问题是在使用基于 0 的语言时期望基于 1 的索引。将代码更改为以下内容应该会给出当前幻灯片编号的预期输出：

    // Function to get the index of a child element within its parent
function getChildIndex(
  parent: string | any[] | HTMLCollection,
  child: Element,
) {
  for (let i = 0; i < parent.length; i++) {
    if (parent[i] === child) {
      // Return the slide number here, not the actual index
      return i + 1;
    }
  }
  return -1; // Child not found
}

    IMO 在这种情况下，将函数名称更改为更准确的名称是有意义的，即getSlideNumber，但只要在您的权限范围内有效即可。

    • 2

  2. 只需.querySelectorAll选择您想要计数的任何元素的父元素即可提供类似数组的对象。

    • 1

相关问题