jquery兄弟标签_jQuery----获取兄弟元素的方法

① $(this).next()；        获取的是当前元素的下一个兄弟元素

②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素

③$(this).prev();           获取的是当前元素的前一个兄弟元素

④$(this).prevAll();       获取的是当前元素的前面的所有的兄弟元素

⑤$(this).siblings();      获取的是当前元素的所有的兄弟元素(自己除外)

案例练习：

需求分析：鼠标进入文字，当前文字背景变红色，当点击时候，当前文字前面文字背景颜色变为黄色，后面文字背景颜色变为蓝色，当鼠标移出时，所有背景颜色取消

效果：

代码如下：

1

2

3

4

5

Title

6

7 ul {8 list-style-type: none;9 width: 200px;10 margin: 100px auto;11 }12

13 ul li {14 margin-top: 10px;15 cursor: pointer;16 text-align: center;17 font-size: 20px;18 }19

20

21

22 //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件

23 //$(function () {

24 获取ul->li

25 //$("ul>li").mouseenter(function () {

26 //$(this).css("backgroundColor","red").siblings().css("backgroundColor","");

27 //}).mouseleave(function () {

28 //$(this).css("backgroundColor","").siblings().css("backgroundColor","");

29 //}).click(function () {

30 当前元素前面的所有兄弟元素背景颜色为黄色

31 $(this).prevAll().css("backgroundColor","yellow");

32 当前元素后面的所有兄弟元素背景颜色为蓝色

33 $(this).nextAll().css("backgroundColor","blue");

34 //

35 链式编程代码

36 断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,

37 解决断链--->恢复到断链之前的一个效果--修复断链

38 .end()方法恢复到断链之前的效果

39 //$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

40 //});

41 //});

42

43 $(function(){44 //链式编程 鼠标进入--鼠标点击--鼠标移出

45 //$("ul>li").mouseover().click().mouseout();

46 $("ul>li").mouseover(function(){47 $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");48 }).click(function(){49 $(this).prevAll().css("backgroundColor","yellow");50 $(this).nextAll().css("backgroundColor","blue");51 }).mouseout(function(){52 $("ul>li").css("backgroundColor","");53 });54 });55

56

57

58

59

青岛啤酒(TsingTao)

60

瓦伦丁(Wurenbacher)

61

雪花(SNOW)

62

奥丁格教士(Franziskaner)

63

科罗娜喜力柏龙(Paulaner)

64

嘉士伯Kaiserdom

65

罗斯福(Rochefort)

66

粉象(Delirium)

67

爱士堡(Eichbaum)

68

哈尔滨牌蓝带

69

70

71

72

注意： 上述代码第49、50行可以压缩成一行，这样就引入了一个新的方法

end()；作用是恢复短链。

原来两行代码：

$(this).prevAll().css("backgroundColor","yellow");

$(this).nextAll().css("backgroundColor","blue");

修改后代码：

$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");