jquery怎么获取上一个兄弟元素

JavaScript013

jquery怎么获取上一个兄弟元素,第1张

1.纯js如下：

var s=document.getElementById('id')

var par=s.parentNode   //得到s的父节点

var ns=s.nextSbiling   //获得s的下一个兄弟节点

var ps=s.previousSbiling  //得到s的上一个兄弟节点

var fc=s.firstChild   //获得s的第一个子节点

2.jQuery如下：

$(ele).parent()//父节点

$(ele).prev()//上一个兄弟节点

$(ele).next()//下一个兄弟节点

先获取当前对象，再根据对象去获取上一个兄弟节点和下一个兄弟节点

.prev()

定义和用法

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

.prev(selector)

参数描述

selector    字符串值，包含用于匹配元素的选择器表达式。  

--说明：如果给定一个表示 DOM 元素集合的 jQuery 对象，.prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素，并用匹配元素构造一个新的 jQuery 对象。

.next()

定义和用法

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

.next(selector)

参数描述

selector    字符串值，包含用于匹配元素的选择器表达式。  

--说明：如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。

示例：

<!--HTML代码-->

<div id="div1">111</div>

div id="div2">222</div>

div id="div3">333</div> $("#div2").prev().attr("id")    //获取div2同级的上一个div的id，值为div1

$("#div2").next().attr("id")    //获取div2同级的下一个div的id，值为div3

你好！

获取同辈的元素，有个siblings()方法，这个可以获取到同级的所有元素

还有prev()、next()分别获取之前和之后的元素，这是取向前或向后的一个元素

prevAll()、nextAll()是获取之前和之后的所有同级元素

<ul>

   <li>list item 1</li>

   <li>list item 2</li>

   <li class="third-item">list item 3</li>

   <li>list item 4</li>

   <li>list item 5</li>

</ul>

$("li.third-item").siblings() //可以获取4个li元素

$("li.third-item").prev()   //取得item2

$("li.third-item").next()   //取得item4

$("li.third-item").prevAll()  //取得item1 itme2

$("li.third-item").nextAll()  //取得item4 item5

还有种方式就是通过siblings()方法获取到同级元素后，使用eq()方法定位元素

var $lis = $("li:last").siblings()

$lis.eq(0)

希望对你有帮助！