Mengenal Selector JQuery Hierachi (Parent > child)

Sabtu, 10 November 2012

Mengenal Selector JQuery Hierachi (Parent > child)

Matches all child elements specified by “child” of elements specified by “parent”. Terjemahan google Cocokkan semua elemen anak ditentukan oleh “anak” dari unsur ditentukan oleh “orang tua”. Bingung yah, nggak usah bingung, kita langsung praktek saja

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#main > *").css("border", "3px double red");
  });
  </script>
  <style>
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
  </style>
</head>
<body>
  <span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>
</body>
</html>

Perintah

$(“#main > *”).css(“border”, “3px double red”);

digunakan untuk merubah border seluruh element input yang dituliskan berada tepat dibawah element dengan id maindalam artian kalau dalam silsilah keluarga element-element yang merupakan anak dari element dengan id=main yang ada di document HTML, bordernya diset dengan tebal 3 pixel dan warnanya merah dengan corak dotted.