eq() siblings()用法

最新推荐文章于 2022-08-25 10:25:34 发布

转载最新推荐文章于 2022-08-25 10:25:34 发布 · 1.6k 阅读

本文详细解释了jQuery中的eq()和siblings()方法的功能及用法，包括匹配特定位置的元素和操作同级元素。通过实例演示了如何使用这些方法来改变元素的样式和实现元素间的相互作用。

1、eq(n)是指匹配到的同类之后的第n-1个元素
比如
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
$("li:eq")匹配的结果就是上面所有的DIV。
而$('li').eq(1)表示第二个DIV（数组的下标是从0开始的）
如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。例如：
$('li').eq(-2).css('background-color', 'red');
这次，项目 4 的背景变为红色，这是因为它是集合结尾开始的第二个。
2、 siblings()

$('li.third-item').siblings().css('background-color', 'red');
表示除了li 下的.third-item，其他的与li同级元素都添加了css元素。

又如：$('.sidebar:eq(0) li').click(function() { //表示从第角标为0的元素开始遍历。

        $(this).css("background-color", "#87CEFA").siblings().css(

                    "background-color", "#FFFFFF");

表示。sidebar 下的li 的元素被单击，那么颜色就变成#87CEFA，其他未选中的为#ffffff.