NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Zmena pozície ak existuje iný element

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
rosina.jakub
Člen
Avatar
rosina.jakub:20.6.2018 14:48

Ahojte,
potrebujem pomôcť. Mám na stránke H2 takto:

   <div class="col-12">
   <h2>
           <span>Výprodej</span>
   </h2>
   <ul class="own-dots"></ul>
</div>

Nie pri každom sa nachádza UL. Potrebujem zistiť pre každé H2, resp. pre ten div či sa tam nachádza UL a ak áno tak zmeniť left pozíciu pri H2.

Ďakujem za pomoc

 
Odpovědět
20.6.2018 14:48
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.6.2018 15:02

(pseudokod)

<script>
function getTags(name,el) {var el = el ? el : document; return el.getElementsByTagName(name);}

var el, i;
el = getTags('DIV');
cyklus... if (el[i].getTags('UL').length>0) {el[i].getTags('H2')[0].className+='odsazeni';}
</script>

A nemuzes tam pri generovani v php pridat class 'odsazeni'?

A nebylo by jednodussi to zmenit zrovna u toho divu?

cyklus... if (el[i].getTags('UL').length>0) {el[i].className+='odsazeni';}

Ps, mozna to bude treba napsat zvlast

var el = {};
el.div = getTags('DIV');
cyklus...
  el.ul = getTags('UL');
  if (el.ul.length>0) {
    el.h2 = getTags('H2');
    el.h2[0].className += 'odsazeni';
    }
Editováno 20.6.2018 15:02
 
Nahoru Odpovědět
20.6.2018 15:02
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.6.2018 15:05

Juj, ups, jinak ta funkce getTags :) Je treba tam uvest ten zdrojovy element, od ktereho ma H2 a UL hledat.

var el = {};
el.div = getTags('DIV');
cyklus...
  el.ul = getTags('UL', el.div[i]); // zmena
  if (el.ul.length>0) {
    el.h2 = getTags('H2', el.div[i]); // zmena
    el.h2[0].className += 'odsazeni';
    }
Editováno 20.6.2018 15:05
 
Nahoru Odpovědět
20.6.2018 15:05
Avatar

Člen
Avatar
Odpovídá na Peter Mlich
:20.6.2018 23:44

Čo je to za kód Peter? A čo tak takto nejak?

document
  .querySelectorAll('div h2 + ul')
  .forEach({previousSibling} => {previousSibling.style.textAlign = 'left'})

Teda ak mu šlo o text align, lebo nerozumiem ani jeho otázke, čo vôbec znamená "zmeniť left pozíciu pri h2" a popravde, nerozumiem ani tvojmu kódu.

 
Nahoru Odpovědět
20.6.2018 23:44
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na
Peter Mlich:21.6.2018 8:16

Asi to mas ok. Muj kod to resi pro stare prohlizece. Ty novejsi veci moc neovladam. Ale chapu, ze to tve by mohlo fungovat stejne a je to vic prehlednejsi.

Vysvetleni mozna lepe graficky, jestli to spravne chapu.

nadpis - jen H2
text

nadpis - jen H2
text

  nadpis - H2 + odrazky - posun zleva
* odrazka
* odrazka

nadpis - jen H2
text
Editováno 21.6.2018 8:16
 
Nahoru Odpovědět
21.6.2018 8:16
Avatar
rosina.jakub
Člen
Avatar
Odpovídá na
rosina.jakub:21.6.2018 8:18

Zmenu ľavej pozície myslím v css napr:

left: 10px;
 
Nahoru Odpovědět
21.6.2018 8:18
Avatar

Člen
Avatar
Odpovídá na rosina.jakub
:21.6.2018 11:28

Teoreticky toto, ale ešte som to neskúšal, píšem to z mobilu. Overím to neskôr a napíšem znovu.

document
  .querySelectorAll('div h2 + ul')
  .forEach({previousSibling: {style: {left}}} => {
    left = '10px'
  }
 
Nahoru Odpovědět
21.6.2018 11:28
Avatar

Člen
Avatar
Odpovídá na rosina.jakub
:21.6.2018 17:03

Dobre. Takže toto funguje. Samozrejme, za podmienky, že máš na tej H2 zapnuté position relative, alebo absolute.

document
  .querySelectorAll('div h2 ~ ul')
  .forEach(({previousElementSibling: {style}}) => {
    style.left = '30px'
  })
 
Nahoru Odpovědět
21.6.2018 17:03
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na
Peter Mlich:22.6.2018 8:49

Ja bych pouzil el.className, pridat tam dalsi tridu a jeji vlastnosti doladit v css souboru.

 
Nahoru Odpovědět
22.6.2018 8:49
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.