Estou tentando obter o índice de um elemento filho em um controle deslizante de galeria de fotos desenvolvido internamente. Parece que estou obtendo um índice de 0, mas gostaria de obter o número do slide. Eu tentei muitas coisas e este é o mais próximo que cheguei (toneladas de tentativas com apenas um "-1" como resultado). Qualquer dica seria apreciada.
HTML (de um modelo 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);
Esta é a mensagem do console:
Index of target child within carousel: 0
