php-practice/dom_traversing_II.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
<!DOCTYPE html>
<html>
<head>
  <style>

  p, div, span {margin:2px; padding:1px; }
  div { border:2px white solid; }
  span { cursor:pointer; font-size:12px; }
  .selected { color:blue; }
  b { color:red; display:block; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
    <div>
      <div><span>Hello</span></div>
      <span>Hello Again</span>

    </div>
    <div>
      <span>And Hello Again</span>
    </div>
  </p>

  <b>Click Hellos to toggle their parents.</b>
<script>
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);
}
$("span").click(function () {
  $(this).toggleClass("selected");
  showParents();
});</script>

</body>
</html>