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}

2. リスト内の選択した要素のインデックス位置を取得します。

jQuery では、

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

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

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

.selected

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

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

index() メソッドは 0 からカウントを開始するため、結果は 1 となり、選択された要素が

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

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

は、選択された要素が ul の 2 番目の位置にあることを意味します。 個別のリスト。

index()

メソッドを使用する場合、要素が選択されていない場合は -1 が返されます。

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

概要jQuery を使用して、ページ上の要素の位置とリスト内で選択した要素のインデックス位置を取得すると、多くの対話型操作を簡単に実現できます。ページ上の要素の位置とリスト内のインデックス位置は親要素を基準とするため、使用する場合は HTML 構造と CSS スタイルに注意する必要があることに注意してください。

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