jQuery 「走査系のメソッド」最も近い「配置済み」の親要素を得る

マッチした要素の先祖から、「配置済み」つまりCSSのpositionプロパティがstatic以外（relative、absolute、fixed）の要素で最も近い位置にあるものを返します。アニメーションや要素の動的な配置を行うようなページで、便利なメソッドです。

書式

.offsetParent()

$('p.myClass').offsetParent()

サンプル

特定の要素の先祖から配置済みの要素を探す

<body>
    <div class="main">
    <div class="header">
      <h1> サンプル </h1>
    </div>
      <div class="content">
      <div class="tree" id="FamilyTreeDiv">
      <ul>
      <li>
        <div>
          <span class="direct">おじいちゃん</span>
        </div>
        <ul id="suborder">
          <li>
              <div>
                <span class="direct">お父さん</span>
              </div>
            <ul> 
              <li>
                <div>
                  <span class="direct">お母さん</span>
                  <ul>
                    <li>
                      <div id="felidae">
                          <span class="notdirect">工藤太郎</span><br> 
                          <span class="notdirect">工藤花子</span><br>
                          <span class="direct">山田次郎</span><br> 
                          <span class="notdirect">工藤三郎</span><br> 
                          <span id="child" class="notdirect">工藤恵子</span>
                       </div>
                      </li> 
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <li>
              <div><span id="brothers" class="notdirect">父親の兄弟</span></div>
            </li>
          </ul>
        </li>
      </ul> 
    </div>
    <button class="button" id="button1" type="button" name="button">父親の兄弟のoffsetParent</button>
    </div>
    <div class="footer">
    <hr>
    <p class="copyright">2019 xxxx all rights reserved.</p>
    </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#button1').on('click', function() {
          $('#brothers').offsetParent().css('backgroundColor','green').css('color','white');
        });
      });
    </script>
</body>

カテゴリー:JavaScriptjQueryオブジェクトの走査