NodeList-traverse.html
4.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html id="html">
<head>
<title>Testing dojo.NodeList-traverse extensions to dojo.NodeList</title>
<style type="text/css">
@import "../resources/dojo.css";
</style>
<script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug: true, popup: true"></script>
<script type="text/javascript">
require(["doh", "dojo/query", "dojo/NodeList-traverse", "dojo/domReady!"], function(doh, query){
function verify(/*dojo.NodeList*/nl, /*Array*/ids, /*String*/ comment){
comment = comment || "verify";
for(var i = 0, node; (node = nl[i]); i++){
doh.is(ids[i], node.id, comment + " " + i);
}
//Make sure lengths are equal.
doh.is(ids.length, i, comment + " length");
}
var divs = query("div.testDiv");
doh.register([
function children(t){
verify(divs.last().children(), ["crass", "classy", "yeah"]);
},
function closest(t){
// test simple selector
var classy = query("#classy");
var closestDiv = classy.closest("div");
verify(closestDiv, ["third"], "closest('div')");
verify(closestDiv.end().closest(".classy"), ["classy"], "closestDiv.end().closest('.classy')");
// test descendant selector
var bang = query(".bang");
var closestFooBar = bang.closest(".foo > .bar");
verify(closestFooBar, ["level4"], ".foo > .bar");
// test descendant selector that doesn't match (".foo" alone matches nodes, but not
// ".bogus .foo")
var closestBogusFoo = bang.closest(".bogus .foo");
verify(closestBogusFoo, [], ".bogus .foo");
// positive test that scope argument works: .foo > .bar should match a scope
// of "level2" or above
closestFooBar = bang.closest(".foo > .bar", "level2");
verify(closestFooBar, ["level4"], ".foo > .bar query relative to level2");
// > .bar should match a scope of level3 or level1
var topBar = bang.closest("> .bar", "level3");
verify(topBar, ["level4"], "> .bar query relative to level3");
// negative test that scope argument works: .foo > .bar relative to level3
// doesn't match since .foo is level3, rather than a child of level3
closestFooBar = bang.closest(".foo > .bar", "level3");
verify(closestFooBar, [], ".foo > .bar query relative to level3");
// complex test of multiple elements in NodeList
// Only some of the elements in query("div") have a ".foo" ancestor,
// and three of those elements have the *same* .foo ancestor, so
// closest(".foo") should result in list of just two elements
var closestFoo = query("div").closest(".foo");
verify(closestFoo, ["level1", "level3"], ".foo from div");
},
function parent(t){
verify(query("#classy").parent(), ["third"]);
},
function parents(t){
var classy = query("#classy");
verify(classy.parents(), ["third", "body", "html"]);
verify(classy.parents(".third"), ["third"]);
verify(classy.parents("body"), ["body"]);
},
function siblings(t){
verify(query("#classy").siblings(), ["crass", "yeah"]);
},
function next(t){
verify(query("#crass").next(), ["classy"]);
},
function nextAll(t){
verify(query("#crass").nextAll(), ["classy", "yeah"]);
verify(query("#crass").nextAll("#yeah"), ["yeah"]);
},
function prev(t){
verify(query("#classy").prev(), ["crass"]);
},
function prevAll(t){
verify(query("#yeah").prevAll(), ["classy", "crass"]);
verify(query("#yeah").prevAll("#crass"), ["crass"]);
},
function andSelf(t){
verify(query("#yeah").prevAll().andSelf(), ["classy", "crass", "yeah"]);
},
function first(t){
verify(divs.first(), ["sq100"]);
},
function last(t){
verify(divs.last(), ["third"]);
},
function even(t){
var even = divs.even();
verify(even, ["t"]);
verify(even.end(), ["sq100", "t", "third"]);
},
function odd(t){
var odd = divs.odd();
verify(odd, ["sq100", "third"]);
verify(odd.end(), ["sq100", "t", "third"]);
}
]);
doh.run();
});
</script>
</head>
<body id="body" class="classy">
<h1 id="firstH1">testing dojo.NodeList-traverse</h1>
<div id="sq100" class="testDiv">
100px square, abs
</div>
<div id="t" class="testDiv">
<span id="c1">c1</span>
</div>
<div id="third" class="third testDiv">
<!-- This is the third top level div -->
<span id="crass">Crass, baby</span>
The third div
<span id="classy" class="classy">Classy, baby</span>
The third div, again
<!-- Another comment -->
<span id="yeah">Yeah, baby</span>
</div>
<div id="level1" class="foo">
<div id="level2" class="bar">
<div id="level3" class="foo">
<div id="level4" class="bar">
<div id="level5" class="bar">
<div id="level6" class="bang">foo bar bar bang</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>