Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] pobieranie indeksu elementu o wybranej wartości atrybutu
Forum PHP.pl > Forum > Przedszkole
stellatus
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
List to tablica (console.log(list)) po której musisz iterować.
stellatus
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
To może napisz co chcesz z tym "indeksem" zrobić? Szukasz index NodeList?
stellatus
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
  1. let list = document.querySelectorAll(".facetwp-checkbox");
  2. let indexArray = [];
  3.  
  4. list.forEach(function(element, index) {
  5. if (element.dataset.value === 'ludwig-van-beethoven') indexArray.push(index);
  6. });
  7.  
  8. console.log(indexArray)


Jeśli data-value będzie takie samo może być kilka elementów.
trueblue
  1. const list = document.querySelectorAll(".facetwp-facet-tags .facetwp-checkbox");
  2.  
  3. value='bioinformatik';
  4.  
  5. let index=Array.from(list).findIndex(v => v.dataset.value === value);
stellatus
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.
Invision Power Board © 2001-2020 Invision Power Services, Inc.