jak pobrać id z elementów o tej samej klasie oraz sprawdzić czy spełniają ifa?

0

siemka, w jaki sposób mogę pobrać id klasy oraz je porównać?
obecnie mam taki kod:

html:
var ids = $('.TEST').map(function() {
  return $(this).attr('id');
}).get();

var testDiv = document.getElementById(ids);			
			var testDiv2 = document.getElementById("TEST2");
			
			if(testDiv.offsetTop == testDiv2.offsetTop && testDiv.offsetTop == testDiv2.offsetLeft + 32){
			}

ale w konsoli mam:

Uncaught TypeError: Cannot read property 'offsetTop' of null
1

Masz <DIV id = "2" a odnosisz się do id **TEST2 **: var testDiv2 = document.getElementById("TEST2"). Nie powinno być getElementById("2"), albo żeby zostawić ten parametr tak jak masz, zmienić w divie id na <DIV id = "TEST2"?

PS. Nie piszę w JS więc nie wiem czy to pomoże, może jakoś on tam sobie to dopasowuje ale na logikę ID się nie zgadza według mnie

@Edit
Nie zauważyłem tego mapowania

0
pavarotti napisał(a):

Masz <DIV id = "2" a odnosisz się do id **TEST2 **: var testDiv2 = document.getElementById("TEST2"). Nie powinno być getElementById("2"), albo żeby zostawić ten parametr tak jak masz, zmienić w divie id na <DIV id = "TEST2"?

TEST2 to jest to:

<DIV id="TEST2" class="left-stand" style="background-image: url(http://game.xxxx/character.png); z-index: 2"></DIV>
0

Zdebugguj i zobacz gdzie Ci zwraca null, wydaje mi się że przy tym getElementById(ids)
Skąd on ma wiedzieć że ma wziąć diva o id TEST1?

0

W zmiennej ids dostajesz tablicę, więc taki zapis:

document.getElementById(ids);

jest błędny.

0
pavarotti napisał(a):

Zdebugguj i zobacz gdzie Ci zwraca null, wydaje mi się że przy tym getElementById(ids)
Skąd on ma wiedzieć że ma wziąć diva o id TEST1?

tak zgadza się, zwraca nulla, ale nie wiem jak to poprawić.
TEST1? ma wziasc id z kazdego diva o klasie TEST

Kondziowsky napisał(a):

W zmiennej ids dostajesz tablicę, więc taki zapis:

document.getElementById(ids);

jest błędny.

a jaki jest poprawny?

0

Na pewno nie da się poprzez getElementById bo wtedy bierze 1 element a nie kilka, a nie ma czegoś takiego jak getElementsById ponieważ ID powinno być unikalne.
Skoro tam jest klasa "TEST" to pobierz sobie getElementsByClassName("TEST") do tablicy

1

Musisz ziterować tablicę, coś w tym stylu:

$.each( ids, function( key, value ) {
  document.getElementById(value);
// tutaj robisz co tam chcesz z tym KONKRETNYM elementem
});

No i tutaj @pavarotti ma rację, chyba lepiej sobie pobrać po prostu elementy za pomocą getElementsByClassName i w podobny sposób ziterować

0
pavarotti napisał(a):

Na pewno nie da się poprzez getElementById bo wtedy bierze 1 element a nie kilka, a nie ma czegoś takiego jak getElementsById ponieważ ID powinno być unikalne.
Skoro tam jest klasa "TEST" to pobierz sobie getElementsByClassName("TEST") do tablicy

			var testDiv = document.getElementsByClassName("TEST");
			var testDiv = [];

nie działa, albo robie źle.

0

Wywal drugą linijkę to zadziała i wypełnioną dostaniesz tablicę :D

0
Kondziowsky napisał(a):

Wywal drugą linijkę to zadziała i wypełnioną dostaniesz tablicę :D

a jak ifem teraz to sprawdzać mam? if testDiv nie działa

0
if (typeof testDiv !== 'undefined' && testDiv.length > 0) {
    // nie jest pusta
}

albo znalazłem jakiś "nowszy" sposób

if (Array.isArray(testDiv) && testDiv.length) {
    // tablica istnieje i nie jest pusta
}
0
pavarotti napisał(a):
if (typeof testDiv !== 'undefined' && testDiv.length > 0) {
    // nie jest pusta
}
			if(typeof testDiv !== 'undefined' && testDiv.length > 0){
				if(testDiv.offsetTop == testDiv2.offsetTop && testDiv.offsetLeft == testDiv2.offsetLeft + 32){

}

dalej nie działa :(

0

Ale co dokładnie nie działa? Wyświetl w tym ifie alert ('istnieje') i zrób elsa alert('nie istenieje'), zobacz co wypisze

0

No lepiej jakbyś to sobie po prostu zdebuggował i zobaczył co dostajesz, czego nie dostajesz i gdzie się konkretnie to wywala

0
Kondziowsky napisał(a):

No lepiej jakbyś to sobie po prostu zdebuggował i zobaczył co dostajesz, czego nie dostajesz i gdzie się konkretnie to wywala

Albo jak nie wiesz jak debugować to jeśli alert wypisze że istnieje przeiteruj:

testDiv.forEach(myFunction);

function myFunction(item) {
  alert(item)
}
0
pavarotti napisał(a):

Ale co dokładnie nie działa? Wyświetl w tym ifie alert ('istnieje') i zrób elsa alert('nie istenieje'), zobacz co wypisze

Kondziowsky napisał(a):

No lepiej jakbyś to sobie po prostu zdebuggował i zobaczył co dostajesz, czego nie dostajesz i gdzie się konkretnie to wywala

to dostaje w konsoli

HTMLCollection(2) [div#1.TEST, div#2.TEST]
0: div#1.TEST
1: div#2.TEST
length: 2
2: <unreadable>
__proto__: HTMLCollection
0

Czyli pobrał Ci kolekcję 2 elementów div o id 1 i 2. To chyba dobrze?

0
pavarotti napisał(a):

Czyli pobrał Ci kolekcję 2 elementów div o id 1 i 2. To chyba dobrze?

no tak ale jak teraz kazdy z nich sprawdzić czy mają prawidłowy offsetTop = test2.offsetTop + 32?

każdy div musi być sprawdzany

if(testDiv.offsetTop == testDiv2.offsetTop && testDiv.offsetLeft == testDiv2.offsetLeft + 32){

}

obecnie nie działa

0

A jest w ogóle coś takiego jak offset? Nie ma przypadkiem offsetTop, offsetLeft itd?

0
pavarotti napisał(a):

A jest w ogóle coś takiego jak offset? Nie ma przypadkiem offsetTop, offsetLeft itd?

offsetTop przecież używam.
jak wcześniej miałem to tak:
```javascript
var testDiv = document.getElementsByClassName("TEST")[0];

działało ale tylko na jednym divie. tym pierwszym. drugiego tak jakby nie było.

cały kod teraz wyglada tak:

```javascript
			var testDiv = document.getElementsByClassName("TEST");
			var testDiv2 = document.getElementById("TEST1");
			
			console.log(testDiv);
			
			testDiv.forEach(myFunction);

function myFunction(item) {
  alert(item)
}

			if(Array.isArray(testDiv) && testDiv.length > 0){
				if(testDiv.offsetTop == testDiv2.offsetTop && testDiv.offsetLeft == testDiv2.offsetLeft){
				
}
}

błąd:

Uncaught TypeError: testDiv.forEach is not a function
1
Programistyczny napisał(a):
pavarotti napisał(a):

A jest w ogóle coś takiego jak offset? Nie ma przypadkiem offsetTop, offsetLeft itd?

offsetTop przecież używam.
jak wcześniej miałem to tak:

var testDiv = document.getElementsByClassName("TEST")[0];

działało ale tylko na jednym divie. tym pierwszym. drugiego tak jakby nie było.

Bo pobrałeś tylko pierwszy przez to [0]
Pobierz tablicę i się odnoś potem, a nie przypisuj tylko pierwszy element

Nie ogarniam do końca tego JSFiddle więc na w3schools Ci zrobiłem (brzydko bez line break'ów ale żebyś zobaczył):

Edit
Podpatrzyłem od @Kondziowsky na to codepen.io i tam wrzuciłem :P
https://codepen.io/paprikano/pen/abzWKpx

I sorry, myślałem że używasz samego offset, nie przyuważyłem

1

https://codepen.io/Kondziowsky/pen/wvBdXWJ zerknij sobie na console logi

0
pavarotti napisał(a):
Programistyczny napisał(a):
pavarotti napisał(a):

A jest w ogóle coś takiego jak offset? Nie ma przypadkiem offsetTop, offsetLeft itd?

offsetTop przecież używam.
jak wcześniej miałem to tak:
```javascript
var testDiv = document.getElementsByClassName("TEST")[0];

działało ale tylko na jednym divie. tym pierwszym. drugiego tak jakby nie było.

Bo pobrałeś tylko pierwszy przez to [0]
Pobierz tablicę i się odnoś potem, a nie przypisuj tylko pierwszy element

Nie ogarniam do końca tego JSFiddle więc na w3schools Ci zrobiłem (brzydko bez line break'ów ale żebyś zobaczył):

Edit
Podpatrzyłem od @Kondziowsky na to codepen.io i tam wrzuciłem :P
https://codepen.io/paprikano/pen/abzWKpx

I sorry, myślałem że używasz samego offset, nie przyuważyłem

no to wychodzi ze bym musiał to w ten sposób wtedy sprawdzać o ile sie nie myle
tak działa, zgadza się. ale to wyjdzie od cholery ifów w ten sposób.

	if(testDiv[0].offsetTop == testDiv2.offsetTop && testDiv[0].offsetLeft == testDiv2.offsetLeft +32){
				}
	if(testDiv[1].offsetTop == testDiv2.offsetTop && testDiv[1].offsetLeft == testDiv2.offsetLeft +32){
				}
Kondziowsky napisał(a):

https://codepen.io/Kondziowsky/pen/wvBdXWJ zerknij sobie na console logi

logi są prawidłowe.

key: 0
player.js:261 value: <div id=​"1" class=​"TEST" style=​"left:​ 64px;​ top:​ 64px;​ z-index:​ 6;​ background-image:​ url(http:​/​/​game.xxxx.tk/​npc.gif)​;​ width:​32px;​ height:​48px;​">​</div>​
player.js:262 elem offsetTop: 64
player.js:260 key: 1
player.js:261 value: <div id=​"2" class=​"TEST" style=​"left:​ 64px;​ top:​ 96px;​ z-index:​ 6;​ background-image:​ url(http:​/​/​game.xxxx.tk/​npc.gif)​;​ width:​32px;​ height:​48px;​">​</div>​
player.js:262 elem offsetTop: 96

co dalej?
jak zrobić prawidłowego if'a by to sprawdzał wszystkie te id?

if(testDiv[1].offsetTop == testDiv2.offsetTop && testDiv[1].offsetLeft == testDiv2.offsetLeft +32){}

jeżeli tak jak u gory mam ifa zrobione to tak, działa wtedy ale tylko na tym id co jest w nawiasie.

0

Ale tak wszystkie te ify mają ten sam warunek?
Napisz przykład jakbyś miał 4 elementy i rozpisz wszystkie ify

0
pavarotti napisał(a):

Ale tak wszystkie te ify mają ten sam warunek?

tak, ale id jest pobierane z bazy danych wiec zawsze będzie inne.

1

Zrób pętlę for 0 < testDiv.length - 1 i w każdym obiegu sprawdź w ifie [i] == [i+1], jeśli nie to zwróć false

0
pavarotti napisał(a):

Zrób pętlę for 0 < testDiv.length - 1 i w każdym obiegu sprawdź w ifie [i] == [i+1], jeśli nie to zwróć false

coś takiego?

			for (let i=0;i < testDiv.length-1; i++) {

}

0

Coś ala

for (var i = 0; i < testDiv.length - 1; i++)
{
  if(testDiv[i].offsetTop != testDiv[i + 1].offsetTop || testDiv[i].offsetLeft != testDiv[i + 1].offsetLeft +32) 
  //chyba że to porównujesz jak wyżej z jakimś testDiv2, to wtedy w forze usuń -1, a tu porównuj samo "i" do testDiv2
  {
    return false;
  }
}
0
pavarotti napisał(a):

Coś ala

for (var i = 0; i < testDiv.length - 1; i++)
{
  if(testDiv[i].offsetTop != testDiv[i + 1].offsetTop || testDiv[i].offsetLeft != testDiv[i + 1].offsetLeft +32) 
  //chyba że to porównujesz jak wyżej z jakimś testDiv2, to wtedy w forze usuń -1, a tu porównuj samo "i" do testDiv2
  {
    return false;
  }
}

działa tylko na jednym divie. coś źle zrobiłem?

			for (var i = 0; i < testDiv.length - 1; i++){
				if(testDiv[i].offsetTop == testDiv2.offsetTop && testDiv[i].offsetLeft == testDiv2.offsetLeft +32){
				}

1 użytkowników online, w tym zalogowanych: 0, gości: 1