Skip to content

Commit a287dff

Browse files
anitshanitsh
committed
added dom traverse end, next examples
1 parent 42d016b commit a287dff

File tree

4 files changed

+211
-12
lines changed

4 files changed

+211
-12
lines changed

‎dom_traversing_III.php

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,27 @@ function showParents() {
2424
//alert('daa');
2525
$(".test").click(function () {
2626
//$(this).toggleClass("selected");
27-
var len = $(this).siblings()
28-
.addClass("hilite_sib")
29-
.removeClass('hilite').length;
30-
$(this).addClass("hilite").removeClass('hilite_sib');
31-
$("b").text(len +" "+ $(this).text());
27+
var len = $(this).siblings().length;
28+
//alert(len);
29+
$(this).siblings()
30+
.addClass("hilite_sib")
31+
.removeClass('hilite')
32+
.end()
33+
.addClass("hilite")
34+
.removeClass('hilite_sib').end();
35+
36+
//$(this).nextAll().text(len);
37+
$(this).parent().next().html(len).prepend();
38+
// $(this).parent().css("border","solid 2px black");
39+
//$(this).offsetParent().css("border","solid 2px blue");
3240
//showParents();
33-
var parentEls = $(this).parents()
41+
var parentEls = $(this).parent().next()
3442
.map(function () {
3543
return this.tagName;
3644
})
3745
.get().join(", ");
3846
var parentEls_arr = parentEls.split(',');
39-
parentEls_arr[1].each( function (){
40-
41-
});
42-
43-
//alert(parentEls);
47+
alert(parentEls);
4448
4549
});
4650
});
@@ -54,15 +58,17 @@ function showParents() {
5458
<li class="test">Three</li>
5559
<li class='test'>Four</li>
5660
</ul>
61+
<span><p>This Siblings: <b></b></p></span>
5762
5863
<ul>
5964
<li class='test'>Five</li>
6065
<li class='test'>Six</li>
6166
<li class='test'>Seven</li>
6267
6368
</ul>
69+
<p>This Siblings: <b></b></p>
6470
</div>
65-
<p>This Siblings: <b></b></p>
71+
6672
<script>
6773
6874
</script>

‎dom_traversing_end.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>p { margin:10px; padding:10px; }</style>
5+
<script src="http://code.jquery.com/jquery-latest.js"></script>
6+
</head>
7+
<body>
8+
<p><span>Hello</span>, how are you?</p>
9+
10+
<script>$("p").find("span").end().css("border", "2px red solid");</script>
11+
12+
</body>
13+
</html>

‎dom_traversing_next.php

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?php
2+
/*
3+
* To change this template, choose Tools | Templates
4+
* and open the template in the editor.
5+
*/
6+
?>
7+
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<style>
12+
13+
span { color:blue; font-weight:bold; }
14+
button { width:100px; }
15+
</style>
16+
<script src="http://code.jquery.com/jquery-latest.js"></script>
17+
<script language="javascript">
18+
$(function () {
19+
$("button[disabled]").nextAll().text("this button is disabled");
20+
//alert($("button[disabled]").parent().nextAll().length);
21+
if($("button[disabled]").parent().nextAll().length == 0) {
22+
$('#news ul li:first-child').addClass('active');
23+
}else {
24+
$("button[disabled]").parent().next().addClass('active');
25+
}
26+
27+
});
28+
29+
</script>
30+
</head>
31+
<body>
32+
<div><button disabled="disabled">First</button> - <span></span></div>
33+
<div><button>Second</button> - <span></span></div>
34+
35+
<div><button disabled="disabled">Third</button> - <span></span></div>
36+
37+
38+
</body>
39+
</html>

‎dom_traversing_submit.php

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<?php
2+
3+
/*
4+
* To change this template, choose Tools | Templates
5+
* and open the template in the editor.
6+
*/
7+
?>
8+
9+
<!DOCTYPE html>
10+
<html>
11+
<head>
12+
<style>
13+
textarea { height:45px; }
14+
</style>
15+
<script src="http://code.jquery.com/jquery-latest.js"></script>
16+
</head>
17+
<body>
18+
19+
<table>
20+
<form>
21+
<table id="exampleTable" border="1" cellpadding="10" align="center">
22+
23+
<tr>
24+
<th>
25+
Element Type
26+
</th>
27+
<th>
28+
Element
29+
</th>
30+
31+
</tr
32+
<tr>
33+
<td>
34+
<input type="button" value="Input Button"/>
35+
</td>
36+
37+
</tr>
38+
<tr>
39+
<td>
40+
<input type="checkbox" />
41+
</td>
42+
43+
</tr>
44+
<tr>
45+
<td>
46+
<input type="file" />
47+
</td>
48+
49+
</tr>
50+
<tr>
51+
<td>
52+
<input type="hidden" />
53+
</td>
54+
55+
</tr>
56+
<tr>
57+
<td>
58+
<input type="image" />
59+
</td>
60+
61+
</tr>
62+
<tr>
63+
<td>
64+
<input type="password" />
65+
</td>
66+
67+
</tr>
68+
<tr>
69+
<td>
70+
<input type="radio" />
71+
</td>
72+
73+
</tr>
74+
<tr>
75+
<td>
76+
<input type="reset" />
77+
</td>
78+
79+
</tr>
80+
<tr>
81+
<td>
82+
<input type="submit" />
83+
</td>
84+
85+
</tr>
86+
<tr>
87+
<td>
88+
<input type="text" />
89+
</td>
90+
91+
</tr>
92+
<tr>
93+
<td>
94+
<select><option>Option</option></select>
95+
</td>
96+
97+
</tr>
98+
<tr>
99+
<td>
100+
<textarea></textarea>
101+
</td>
102+
</tr>
103+
104+
<tr>
105+
<td>
106+
<button>Button</button>
107+
</td>
108+
</tr>
109+
<tr>
110+
<td>
111+
<button type="submit">Button type="submit"</button>
112+
</td>
113+
</tr>
114+
115+
</table>
116+
</form>
117+
<div id="result"></div>
118+
119+
<script>
120+
var submitEl = $("td :submit")
121+
.parent('td')
122+
.css({background:"yellow", border:"3px red solid"})
123+
.end();
124+
125+
$('#result').text('jQuery matched ' + submitEl.length + ' elements.');
126+
127+
// so it won't submit
128+
$("form").submit(function () { return false; });
129+
130+
// Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
131+
$('#exampleTable').find('td').each(function(i, el) {
132+
var inputEl = $(el).children(),
133+
inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
134+
$(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
135+
});
136+
137+
138+
</script>
139+
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)