jquery：このポジションの仕組みは？初心者がオフセットなどを使用して配置する

Question

このjqueryオートコンプリート関数をトレースすると、誰かがここで何が起こっているのか詳細に説明できますか？

function showResults() { 
    // get the position of the input field right now (in case the DOM is shifted) 
    var pos = findPos(input); 
    // either use the specified width, or autocalculate based on form element 
    var iWidth = (options.width > 0) ? options.width : $input.width(); 
    // reposition 
    $results.css({ 
     width: parseInt(iWidth) + "px", 
     top: (pos.y + input.offsetHeight) + "px", 
     left: pos.x + "px" 
    }).show(); 
}; 

それは、この機能を使用しています。

function findPos(obj) { 
    var curleft = obj.offsetLeft || 0; 
    var curtop = obj.offsetTop || 0; 
    while (obj = obj.offsetParent) { 
     curleft += obj.offsetLeft 
     curtop += obj.offsetTop 
    } 
    return {x:curleft,y:curtop}; 
} 

参考：http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js

Answer 1

offsetLeftとoffsetTopはそれが要素を含んだだからオフセットされているどのように多くのピクセルobj記述するプロパティです。何この関数が行うことは次のとおりです。

1. 計算変数でこれらの値を、その親要素からobjのオフセットおよび保存
2. 最後
3. 後藤1.繰り返しから計算項目の親要素であることをobjを設定します。あなたがDOMのトップレベルに達するまで。

objがレンダリングされたページの上端から何ピクセルあるかを計算します。

Answer 2

基本的には、オートコンプリートを使用している入力フィールドのX座標とY座標（CSS用語の左と上）と、オートコンプリートHTMLの上部と左のCSS属性を設定して表示されます。つまり、入力エレメントのコーナーとオートコンプリートレイヤーが一致しているので、同じ場所に表示されます（幅と高さも同じです）。

findPos関数では、基本的に、各要素のオフセット（最終的にはbodyタグ）のオフセット（を参照）を取得して、その入力の正確なx座標とy座標を取得するDOMツリーをバックアップしていますオートコンプリートレイヤをその座標に配置することができます。これらを合計し、CSSの左と上の位置を設定する際に使用するxとyの値を元に戻します。

入力のx、yの位置、高さ、幅をコピーして、オートコンプリートレイヤーに適用することで、視覚的に一致するようにしています。