Forum PHP.pl > [HTML][JavaScript] pobieranie indeksu elementu o wybranej wartości atrybutu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][JavaScript] pobieranie indeksu elementu o wybranej wartości atrybutu

stellatus

25.03.2020, 13:49:38

Każde dziecko diva .facetwp-facet-tags ma swój indeks. Chciałbym pobrać indeks elementu o wybranej wartości data-value, np. "autarkie". Jak to zrobić?

Kod

<div class="facetwp-facet-tags">
    <div class="facetwp-checkbox" data-value="arbeit">
        Arbeit <span class="facetwp-counter">(4)</span>
        <span class="facetwp-expand">[+]</span>
    </div>
    <div class="facetwp-depth">
        <div class="facetwp-checkbox" data-value="arbeitsrecht">
            Arbeitsrecht <span class="facetwp-counter">(4)</span>
        </div>
        <div class="facetwp-checkbox" data-value="gastronomie">
            Gastronomie <span class="facetwp-counter">(4)</span>
        </div>
    </div>
    <div class="facetwp-checkbox" data-value="autarkie">
        Autarkie <span class="facetwp-counter">(2)</span>
    </div>
    <div class="facetwp-checkbox" data-value="bach-johann-sebastian">
        Bach, Johann Sebastian <span class="facetwp-counter">(1)</span>
    </div>
    <div class="facetwp-checkbox" data-value="ludwig-van-beethoven">
        Beethoven, Ludwig van <span class="facetwp-counter">(1)</span>
    </div>
    <div class="facetwp-checkbox" data-value="behinderten">
        Behinderten <span class="facetwp-counter">(1)</span>
    </div>
    <div class="facetwp-checkbox" data-value="bioinformatik">
        Bioinformatik <span class="facetwp-counter">(1)</span>
    </div>
    <div class="facetwp-checkbox" data-value="christentum">
        Christentum <span class="facetwp-counter">(4)</span>
        <span class="facetwp-expand">[+]</span>
    </div>
</div>

Każde dziecko .facetwp-facet-tags ma klasę .facetwp-checkbox. Do konsoli wpisałem coś takiego:

Kod

let list = document.querySelectorAll("div.facetwp-checkbox");
let i = list.indexOf("div.facetwp-checkbox[data-value=autarkie]");
console.log("i");

To nie działa. Wyświetla się błąd: "TypeError: list.indexOf is not a function".

viking

25.03.2020, 13:58:20

List to tablica (console.log(list)) po której musisz iterować.

stellatus

25.03.2020, 14:31:35

Sorry, niewiele mi to jednak pomogło. Co powinienem dokładnie zrobić? Myślałem, żeby może utworzyć tablicę tylko z wartości "data-value" i wtedy mógłbym bez problemu pobierać indeksy tak jak tutaj: https://www.w3schools.com/jsref/tryit.asp?f...f_indexof_array Nie jest to lepsza droga?

viking

25.03.2020, 14:54:32

To może napisz co chcesz z tym "indeksem" zrobić? Szukasz index NodeList?

stellatus

25.03.2020, 15:29:08

Na razie zrobiłem to tak i chyba mi to wystarczy:

Kod

let list = document.querySelectorAll(".facetwp-facet-tags .facetwp-checkbox");
let indexArray = [];

indexArray = []
        list.forEach(function(element, index, array) {
                indexArray.push(element.getAttribute("data-value"));
        });
console.log(indexArray)

let dataValue = ""
dataValue = "autarkie";
let a = indexArray.indexOf(dataValue);

console.log(a)

viking

25.03.2020, 16:16:32

[HTML] pobierz, plaintext 
let list = document.querySelectorAll(".facetwp-checkbox");
let indexArray = [];
 
list.forEach(function(element, index) {
  if (element.dataset.value === 'ludwig-van-beethoven') indexArray.push(index);
});
 
console.log(indexArray)
[HTML] pobierz, plaintext

Jeśli data-value będzie takie samo może być kilka elementów.

trueblue

25.03.2020, 16:39:34

[HTML] pobierz, plaintext 
const list = document.querySelectorAll(".facetwp-facet-tags .facetwp-checkbox");
 
value='bioinformatik';
 
let index=Array.from(list).findIndex(v => v.dataset.value === value);
[HTML] pobierz, plaintext

stellatus

25.03.2020, 22:11:57

Dzięki. Przeanalizuję to i dam znać jak będę gotów.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.