• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dostanie sie do atrybutów

VPS Starter Arubacloud
+1 głos
295 wizyt
pytanie zadane 24 listopada 2021 w JavaScript przez Olivier Mazur Użytkownik (680 p.)
Witam mam taki kod:
for (var i = 0; i < self.placeholders.length; i++) {
      $placeholder = self.placeholders[i].$item;
      console.log($placeholder)
}

console wyswietla mi cos takiego:

Jak się dostać teraz do tych wszystkich divow? Bo chcialbym powyciagac z nich atrybuty za pomocą dataset

1
komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czym jest zmienna self? To jakaś referencja do window / this? Co się pokazuje, gdy w pętli wylogujesz $placeholder.length?

komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)

self odnosi się do obiektu to cos takiego jak this w klasach. Jest to bardzo stary kod i cięzko mi go zrozumiec do konca. Po wykonsolowaniu mam cos takiego:

1 odpowiedź

+5 głosów
odpowiedź 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 24 listopada 2021 przez Olivier Mazur
 
Najlepsza

Sądząc po długości listy, która wynosi 1, to do jedynego elementu możesz się dostać po prostu podając indeks 0:

console.log('$placeholder item:', $placeholder[0])

Jeśli chciałbyś sobie te elementy wyciągnąć do tablicy poza jQuery, to np. w ten sposób:

const elements = [...self.placeholders].map(element => element.$item[0]);

 

komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
Faktycznie, udało się wyciągnąć i mam coś takiego:

https://zapodaj.net/d2d69810cfcde.png.html

i w niektórych divach znajdują się znaczniki a, jak mogę się dostac tam i wyciągnąć z nich data-utilize?
1
komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Użyj np. querySelector na tych divach, żeby wyciągnąć znaczniki <a>, a wartość atrybutu data-utilize odczytasz przy pomocy dataset, czyli np.:

const linksDataUtilize = elements.map(
  element => element.querySelector('a[data-utilize]')?.dataset.utilize
);

 

komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)

Kod jest mega stary i wyskakuje mi taki błąd:

for (var i = 0; i < self.placeholders.length; i++) {
                $placeholder = self.placeholders[i].$item;
                console.log($placeholder[0])
                const elements = [...self.placeholders].map(element =>   element.$item[0]);
                const linksDataUtilize = elements.map(
                    element => element.querySelector('a')?.dataset.utilize
                  );
                console.log(linksDataUtilize)
}

Module parse failed: Unexpected token (542:58)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 // console.log($placeholder[0])
|                 var linksDataUtilize = elements.map(
>                     element => element.querySelector('a')?.dataset.utilize
|                   );
|                   console.log(linksDataUtilize)
 @ ./src/desktop-hp.ts 21:0-41

 

Czy można inaczej zapisać aby to zadziałalo? Nie wiem czy to przez "map" czy moze przez spread operator?

komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Można polecieć starszym kodem:

var elements = [].map.call(self.placeholders, function(element) {
  return element.$item[0];
});
var linksDataUtilize = elements.map(function(element) {
  var anchor = element.querySelector('a[data-utilize]');

  if (anchor) {
    return anchor.dataset.utilize;
  }

  return null;
});

 

 

komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
jestes w szkoku, ze to działa :D, a męczylem się od południa z tym.... Dziekuję
komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)
Z ciekawości - używasz webpacka (tak wnioskuję po linku z loga błędu)? Do której wersji ECMAScript transpilujesz?
komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
a gdzie to mogę sprawdzic? Dzis dopiero zacząlem się babrac w tym kodzie i nie wiem gdzie się cos takiego sprawdza
komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Plik webpack.config.js, albo popatrzeć po skryptach w package.json.

1
komentarz 24 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
es5
komentarz 24 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

A nie ma tam jakiegoś loadera pod nowsze wersje ECMAScript? Jeśli czepia się arrow function, to tam raczej nie ma żadnej transpilacji, bo AFAIK ta stała się popularna dopiero od czasów ES6 (czyli m.in. wprowadzenia arrow function).

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)

napisałem sobie coś takiego 

var table = [];

var elements = [].map.call(self.placeholders, function (element) {
  return element.$item[0];
});

var linksDataUtilize = [].map.call(elements, function (element) {
  var anchor = element.querySelector("a");

  if (anchor) {
    var obj = {
      element: element,
      utilize: anchor.dataset.utilize,
      cta: anchor.dataset.cta,
      ctaCategory: anchor.dataset.ctaCategory
    };
    table.push(obj);
  }
});
console.log("links2", table);

Pomógłbys mi może przerobić ten kod na jquery? Bo tego wymagaja... z jquery wiem,że są takie metody jak find, filter... pobranie elementu odbywa sie za pomocą $, ale ten kod cos mi nie idzie

1
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na oko coś takiego:

var table = [];
self.placeholders.forEach(function (index, element) {
    var anchor = element.$item.find("a");

    if (anchor && anchor.length) {
        var obj = {
          element: element,
          utilize: anchor.data("utilize"),
          cta: anchor.data("cta"),
          ctaCategory: anchor.data("ctaCategory")
        };

        table.push(obj);
    }
});
console.log("links2", table);

 

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
taki błąd otrzymuje :)

desktop-hp.83806c7ae1f8523ef6fb.jsgz:3773 Uncaught TypeError: Cannot read properties of undefined (reading 'find')
    at desktop-hp.83806c7ae1f8523ef6fb.jsgz:3773
    at Array.forEach (<anonymous>)
    at Object.placeAds (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3772)
    at Object.onGetActionsFromDomain (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3601)
    at XMLHttpRequest.request.onreadystatechange (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3489)
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Której linijki ten błąd dotyczy? Jak klikniesz w któryś z pierwszych linków:

   at desktop-hp.83806c7ae1f8523ef6fb.jsgz:3773
   at Array.forEach (<anonymous>)
   at Object.placeAds (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3772)

 to Cię przeniesie do miejsca występowania błędu.


Ah, chyba błędem jest użycie metody forEach zamiast each, bo teraz argumenty callbacka są odwrócone.

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
jak zamienilem forEach na each to mam to:

desktop-hp.83806c7ae1f8523ef6fb.jsgz:3775 Uncaught TypeError: self.placeholders.each is not a function
    at Object.placeAds (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3775)
    at Object.onGetActionsFromDomain (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3601)
    at XMLHttpRequest.request.onreadystatechange (desktop-hp.83806c7ae1f8523ef6fb.jsgz:3489)
1
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, self.placeholders to jest zwykła tablica, czy kolekcja jQuery? Jeśli zwykła tablica, to zostaw forEach zamiast each i po prostu usuń argument index (wystarczy sam element). Ewentualnie owiń tą tablicę w $(  ) żeby móc operować na tym w jQuery.

Czyli jedno z:

//// jeśli zwykła tablica
self.placeholders.forEach(function (element) {

// albo
$(self.placeholders).each(function (index, element) {

//// jeśli kolekcja jQuery
self.placeholders.each(function (index, element) {

 

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
działa te wersja z each, ale nie rozumiem dlaczego został dodany $ przed self.placeholders?
1
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

Użycie $( .. ) pozwala m.in owinąć zwykłą kolekcję elementów w jQuery-owy odpowiednik, dzięki czemu można na tym używać metod z jQuery. Biblioteka posługuje się swoim "typem" dla elementów w DOM, więc jeśli operujesz na natywnym elemencie/kolekcji DOM, to najpierw musisz owinąć to w kolekcję/typ jQuery, żeby móc na tym dalej działać poprzez API biblioteki; chociaż nie wnikałem, czy są jakieś hacki, aby używać metod jQuery bez owijania danych wejściowych (a'la Function.prototype.call).

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)
dziękuję jeszcze raz
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)

P.S. Wg mnie warto jest stosować konwencję prefixowania nazw zmiennych znakiem dolara, żeby móc na pierwszy rzut oka odróżnić zmienną o wspomnianym typie jQuery od natywnego elementu/kolekcji z DOM. Więc nazwałbym anchor ⇒ $anchor oraz self.placeholders ⇒ self.$placeholders (jeśli faktycznie to jest kolekcja elementów jQuery, a nie natywnych DOM).

komentarz 26 listopada 2021 przez Olivier Mazur Użytkownik (680 p.)

Jeszcze mam takie pytanie, zrobilem:

console.log($(self.placeholders))
 console.log(self.placeholders)

https://zapodaj.net/92c9c4d282855.png.html

Rozumiem, ze init to nazwa kolekcji jquery, a ten drugi console to zwykla tablica?

1
komentarz 26 listopada 2021 przez ScriptyChris Mędrzec (190,190 p.)
Na to wygląda, sądząc po prototypach obu.

Podobne pytania

0 głosów
4 odpowiedzi 534 wizyt
pytanie zadane 16 lutego 2019 w Rozwój zawodowy, nauka, praca przez klaudiusz20046 Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 822 wizyt
pytanie zadane 17 czerwca 2021 w Rozwój zawodowy, nauka, praca przez Olafisz Nowicjusz (230 p.)
0 głosów
1 odpowiedź 128 wizyt
pytanie zadane 4 marca 2017 w Urządzenia mobilne przez Maciej Kaniewski Nowicjusz (120 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...