jqueryを使用してページ上の要素の位置を取得する方法

jQuery は、HTML ドキュメントの走査、イベント処理、アニメーション効果、および AJAX 操作を簡素化するために使用される人気のある JavaScript ライブラリです。 JavaScript開発では、ページ上の要素の位置やリスト内の要素のインデックス位置を取得する必要がよくありますが、この記事ではjQueryを使ってページ上の要素の位置やインデックスを取得する方法を紹介します。リスト内の選択した要素の位置。

1. ページ上の要素の位置を取得する

jQuery では、.position()、.offset() を使用できます。 ,.scrollTop() およびその他のメソッドを使用して、ページ上の要素の位置を取得します。ここでは例として .position() メソッドを取り上げます:

$(selector).position()

このうち selector は位置を取得する要素の CSS セレクターを表します。オブジェクトを返します。top と left の 2 つの属性が含まれます。これら 2 つのプロパティは、最も近い位置にある祖先を基準とした要素の上端と左端のピクセル値をそれぞれ表します。祖先要素が配置されていない場合は、ドキュメントの左上隅を基準に配置されます。

たとえば、次の HTML 構造がある場合:

<div id="parent" style="position:relative">
  <div id="child" style="position:absolute; top:10px; left:20px;"></div>
</div>

、次のコードを使用して、親要素 ## に関連する #child 要素を取得できます。 ##parent 位置:

$("#child").position() // {top: 10, left: 20}

.index()## を使用できます。 # 選択された要素を取得するメソッド 親要素内の要素のインデックス位置。このメソッドは同じレベルの要素に対してのみ機能し、それ以外の場合はエラーがスローされます。 たとえば、次の HTML 構造がある場合:

<ul>
  <li>香蕉</li>
  <li class="selected">苹果</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>

、次のコードを使用して、親要素 ## 内の選択された要素

を取得できます。 #ul インデックス位置:

$("ul li.selected").index() // 1

ul リスト 位置は 2 番目です。 1 からカウントを開始したい場合は、次のようにメソッド パラメータで 1 を渡すことができます。

$("ul li.selected").index() + 1 // 2

index()

$("ul li").index($("ul li.unselected")) // -1

以上がjqueryを使用してページ上の要素の位置を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。