1+ <!DOCTYPE html>
2+ <html >
3+ <head >
4+ <style >
5+ ul { float :left ; margin :5px ; font - size :16px ; font - weight :bold ; }
6+ p { color :blue ; margin :10px 20px ; font - size :16px ; padding :5px ;
7+ font - weight :bolder ; }
8+ .hilite { background :yellow ; }
9+ .hilite_sib { background :red ; }
10+ </style >
11+ <script src = " http://code.jquery.com/jquery-latest.js" ></script >
12+ <script language = " javascript" >
13+ function showParents() {
14+ $(" div" ). css (" border-color" , " white" );
15+
16+ var len = $(" span.selected" )
17+ . parents (" div" )
18+ . css (" border" , " 2px red solid" )
19+ . length ;
20+ // alert(len);
21+ $(" b" ). text (" Unique div parents: " + len );
22+ }
23+ $(function () {
24+ // alert('daa');
25+ $(" .test" ). click (function () {
26+ // $(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 ());
32+ // showParents();
33+ var parentEls = $(this ). parents ()
34+ . map (function () {
35+ return this . tagName ;
36+ } )
37+ .get().join(", ");
38+ var parentEls_arr = parentEls.split(',');
39+ parentEls_arr[1].each( function (){
40+
41+ } );
42+
43+ //alert(parentEls);
44+
45+ });
46+ });
47+ </script >
48+ </head >
49+ <body >
50+ <div class = " ul_list" >
51+ <ul >
52+ <li class = ' test' >One</a ></li >
53+ <li class = ' test' >Two</li >
54+ <li class = " test" >Three</li >
55+ <li class = ' test' >Four</li >
56+ </ul >
57+
58+ <ul >
59+ <li class = ' test' >Five</li >
60+ <li class = ' test' >Six</li >
61+ <li class = ' test' >Seven</li >
62+
63+ </ul >
64+ </div >
65+ <p >This Siblings: <b ></b ></p >
66+ <script >
67+
68+ </script >
69+
70+ </body >
71+ </html >
0 commit comments