Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript] pobieranie indeksu elementu o wybranej wartości atrybutu
stellatus
post 25.03.2020, 13:49:38
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----

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".



Go to the top of the page
+Quote Post
viking
post 25.03.2020, 13:58:20
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
stellatus
post 25.03.2020, 14:31:35
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
viking
post 25.03.2020, 14:54:32
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
stellatus
post 25.03.2020, 15:29:08
Post #5





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----

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)


Ten post edytował stellatus 25.03.2020, 15:36:22
Go to the top of the page
+Quote Post
viking
post 25.03.2020, 16:16:32
Post #6





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  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)
[HTML] pobierz, plaintext


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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
trueblue
post 25.03.2020, 16:39:34
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  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);
[HTML] pobierz, plaintext


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
stellatus
post 25.03.2020, 22:11:57
Post #8





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----

Dzięki. Przeanalizuję to i dam znać jak będę gotów.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 16.04.2024 - 21:15
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn