"ancestor descendant"

$('ancestor descendant') 1.0追加

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

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

デモ

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

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0;
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <div>緑のボーダーがForm領域です。</div>
    <label>子要素:</label>
    <input name="name" />
    <fieldset>
      <label>孫要素:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  Formの外: <input name="none" />
<script>$("form input").css("border", "2px dotted blue");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM