php-practice/dom_traversing_III.php at master · php-dev/php-practice · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
      font-weight:bolder; }
  .hilite { background:yellow; }
  .hilite_sib { background:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script language="javascript">
      function showParents() {
  $("div").css("border-color", "white");

      var len = $("span.selected")
                       .parents("div")
                       .css("border", "2px red solid")
                       .length;
      //alert(len);
      $("b").text("Unique div parents: " + len);
}
$(function () {
    //alert('daa');
    $(".test").click(function () {
        //$(this).toggleClass("selected");
        var len = $(this).siblings().length;
        //alert(len);
        $(this).siblings()
               .addClass("hilite_sib")
               .removeClass('hilite')
               .end()
               .addClass("hilite")
               .removeClass('hilite_sib').end();

        //$(this).nextAll().text(len);
        $(this).parent().next().html(len).prepend();
       // $(this).parent().css("border","solid 2px black");
        //$(this).offsetParent().css("border","solid 2px blue");
        //showParents();
        var parentEls = $(this).parent().next()
            .map(function () {
                  return this.tagName;
                })
            .get().join(", ");
        var parentEls_arr = parentEls.split(',');
        alert(parentEls);

    });
});
  </script>
</head>
<body>
    <div class="ul_list">
  <ul>
    <li class='test'>One</a></li>
    <li class='test'>Two</li>
    <li class="test">Three</li>
    <li class='test'>Four</li>
  </ul>
   <span><p>This Siblings: <b></b></p></span>

  <ul>
    <li class='test'>Five</li>
    <li class='test'>Six</li>
    <li class='test'>Seven</li>

  </ul>
         <p>This Siblings: <b></b></p>
    </div>

<script>

</script>

</body>
</html>