×
Vytvárame riešenia

Ako zistiť či je element v inom elemente

V tomto článku predstavím riešenie, ktoré zisťuje, či sa daný element nachádza vo vnútri iného elementu. Na detekciu root elementu použijem CSS selectory class a id. Príklad je vhodný napríklad ak vyhľadávate dáky viditeľný node. Viditeľný sa tým myslí, že má vlastnosť visibility : visible a display nemá none. No nezobrazuje sa preto, lebo niektorý z nadradených elementov je skrytý napríklad cez triedu .hide. V tomto prípade sa stáva node neviditeľným.
Vyhľadávanie sa bude vykonávať až po element <body>. Vstupnými argumentmi sú node, ktorému zisťujeme viditeľnosť a trieda alebo id, ktoré rušia viditeľnosť. Na záver je vytvorený test funkcionality.
Príklad: Vytvorenie testovacieho stromu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="hide">
<div class="e1">
<div class="e2">
<div class="e3">
<div class="e4">
<div id="test1"></div>
</div>
</div>
</div>
</div>
</div>
<div id="hide">
<div class="e1">
<div class="e2">
<div class="e3">
<div class="e4">
<div id="test2"></div>
</div>
</div>
</div>
</div>
</div>
Príklad: Vytvorenie funkcie pre vyhľadávanie.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function isNodeInsideSelector(node, selector) {
var inside = false;
var parent = node;
function hasSelector() {
if (selector[0] === ".") {
return parent.classList.contains(selector.replace(".", ""));
} else {
return parent.id === selector.replace("#", "");
}
}
while (parent &amp;&amp; parent.nodeName !== "BODY") {
parent = parent.parentNode;
if (hasSelector()) {
inside = true;
break;
}
}
return inside;
}
Príklad: Vytvorenie testov.
1
2
3
4
5
6
7
8
9
var node = document.getElementById("test1");
console.log(isNodeInsideSelector(node, ".hide"));
console.log("--------------------------------------");
console.log(isNodeInsideSelector(node, "#hide"));
console.log("======================================");
node = document.getElementById("test2");
console.log(isNodeInsideSelector(node, "#hide"));
console.log("--------------------------------------");
console.log(isNodeInsideSelector(node, ".hide"));
Nasledujúci príklad je zjednodušením predchádzajúceho. V tomto prípade zisťujem, či element je súčasťou dákeho elementu, ktorý je skrytý cez triedu hide. Výsledkom je to, že daný element kvôli skrytému parentovi nie je viditeľný.
Príklad: Detekcia, či je element viditeľný.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function isNodeVisible(node, className) {
className = className ? className : "hide";
var visible = true;
var parent = node;
while (parent &amp;&amp; parent.nodeName !== "BODY") {
parent = parent.parentNode;
if (parent.classList.contains(className)) {
visible = false;
break;
}
}
return visible;
}
Uvedený mechanizmus je možné ešte upraviť napríklad o testovanie virtuálnych uzlov či vlastností visibility a display. Nasledujúci príklad zahrňuje spomenuté možnosti.
Príklad: Detekcia, či je element viditeľný.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function isNodeVisible(node, className) {
className = className ? className : "hide";
var visible = true;
var parent = node;
while (parent && parent.nodeName !== "BODY") {
parent = parent.parentNode;
if (!parent) {
break;
}
if ((parent.classList && parent.classList.contains(className)) ||
getComputedStyle(parent).visibility == "hidden" ||
getComputedStyle(parent).display == "none") {
visible = false;
break;
}
}
return visible;
}

Záver

Okrem triedy hide je možné použiť aj inú triedu. Uvedená technika je vhodná, ak sa pracuje so šablónami (templates) obsahujúcimi viacero panelov (panes), kde jeden je zobrazený a ostatné sa skrývajú.
JavaScript,traverse,DOM,selector,CSS,parent,hidden,display,none,
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších