我正在尝试获取本地照片库滑块中子元素的索引。我似乎得到的索引为 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
