js STUDIO

"ancestor descendant"

$('ancestor descendant') 1.0追加

先祖要素(ancestor)を持つ、子孫エレメント(descendant)を選択します。

項目 説明
ancestor 先祖要素です。特定のセレクタを指定します。
descendant 子孫要素です。ancestorから更に絞り込むセレクタを指定します。

デモ

フォーム内の子孫要素であるINPUTを選択し、青のボーダーで囲います。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.   body { font-size:14px; }
  6.   form { border:2px green solid; padding:2px; margin:0;
  7.          background:#efe; }
  8.   div { color:red; }
  9.   fieldset { margin:1px; padding:3px; }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-latest.js"></script>
  12. </head>
  13. <body>
  14.   <form>
  15.     <div>緑のボーダーがForm領域です。</div>
  16.     <label>子要素:</label>
  17.     <input name="name" />
  18.     <fieldset>
  19.       <label>孫要素:</label>
  20.       <input name="newsletter" />
  21.     </fieldset>
  22.   </form>
  23.   Formの外: <input name="none" />
  24. <script>$("form input").css("border", "2px dotted blue");</script>
  25. </body>
  26. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM