Comment obtenir la position d'un élément sur la page avec jquery

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier la traversée de documents HTML, la gestion des événements, les effets d'animation et les opérations AJAX. Dans le développement JavaScript, il est souvent nécessaire d'obtenir la position d'un élément sur la page et la position d'index de l'élément dans une liste. Cet article présentera comment utiliser jQuery pour obtenir la position de l'élément sur la page et l'index. position de l'élément sélectionné dans la liste.

1. Obtenez la position de l'élément sur la page

Dans jQuery, vous pouvez utiliser .position(), .offset(), .scrollTop () et d'autres méthodes pour obtenir la position de l'élément sur la page. Nous prenons ici comme exemple la méthode .position() : .position()、.offset()、.scrollTop() 等方法来获取元素在页面中的位置。这里以 .position() 方法为例：

$(selector).position()

其中，selector 表示要获取位置的元素的 CSS 选择器，该方法将返回一个对象，包含 top 和 left 两个属性。这两个属性分别表示元素相对于其最近的定位祖先元素的上边缘和左边缘的像素值。如果没有定位祖先元素，则相对于文档的左上角。

举个例子，假如有以下 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}

二、获取被选中元素在列表中的索引位置

在 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 列表中的位置为第二个。如果希望从 1 开始计数，则可以在方法参数中传递 1，如：

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

表示被选中元素在 ul 列表中的位置为第二个。

在使用 index()

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

Parmi elles, selector représente le sélecteur CSS de l'élément dont la position doit être obtenue par cette méthode. renverra un objet contenant deux attributs top et left. Ces deux propriétés représentent respectivement les valeurs de pixels des bords supérieur et gauche de l'élément, par rapport à son ancêtre positionné le plus proche. Si aucun élément ancêtre n'est positionné, il l'est par rapport au coin supérieur gauche du document.

Par exemple, si vous avez la structure HTML suivante :

rrreee

Vous pouvez utiliser le code suivant pour obtenir la position de l'élément #child par rapport à son élément parent #parent code> : 🎜rrreee 🎜2. Obtenez la position d'index de l'élément sélectionné dans la liste🎜🎜Dans jQuery, vous pouvez utiliser la méthode <code>.index() pour obtenir la position d'index de l'élément sélectionné dans son élément parent. Cette méthode ne fonctionne que sur des éléments du même niveau, sinon une erreur sera générée. 🎜🎜Par exemple, si vous avez la structure HTML suivante : 🎜rrreee🎜Vous pouvez utiliser le code suivant pour obtenir la position d'index de l'élément sélectionné .selected dans son élément parent ul code> : 🎜rrreee 🎜Il est à noter que la méthode <code>index() commence à compter à partir de 0, donc le résultat de 1 signifie que la position de l'élément sélectionné dans le ul la liste est la deuxième. Si vous souhaitez commencer à compter à partir de 1, vous pouvez passer 1 dans le paramètre méthode, tel que : 🎜rrreee🎜 signifie que la position de l'élément sélectionné dans la liste ul est le deuxième. 🎜🎜Lors de l'utilisation de la méthode index(), si un élément n'est pas sélectionné, -1 sera renvoyé. 🎜rrreee🎜Résumé🎜🎜Utiliser jQuery pour obtenir la position de l'élément sur la page et la position d'index de l'élément sélectionné dans la liste peut facilement réaliser de nombreuses opérations interactives. Il convient de noter que la position d'un élément sur la page et la position de l'index dans la liste sont relatives à son élément parent, vous devez donc faire attention à la structure HTML et au style CSS lorsque vous l'utilisez. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!