关于JQ获取同级元素问题(相邻、不相邻)

时间:2024-03-17 07:55:50

本人于开发项目过程遇获取不相邻同级元素问题,特发表此文章,分享自己个人解决方法,若其他博友有更好的意见或解决方法,望不吝啬,大胆提出,我们共同探讨,共同进步!

相信不少的博友都知道在JQ获取同级元素的标签,下面笔者先简单说明一下这几个标签:


jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点 

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 

jQuery.nextAll(),返回所有之后的兄弟节点 

jQuery.siblings(),返回兄弟姐妹节点,不分前后


这里笔者要提出的问题是:如果我要获取某一元素的相隔的某一个元素或标签,利用prev()获取next()是做不到的,但是用prevAll()和nextAll()

有满足不了这个需求。下面笔者就W3school的编辑器截图来说明一下:

关于JQ获取同级元素问题(相邻、不相邻)


从上面的截图可以看错在类名为selected的p标签的上一个相邻div的北京颜色变成的黄色,但是问题来了,如果在它们加上一个另外的元素标签,那么

div的背景颜色是不会显示的,如截图:

关于JQ获取同级元素问题(相邻、不相邻)

如上面截图,如果中间多了一个<span>标签元素,那么prev()就不奏效了。

由此引出本文要探讨的问题:如果中间有相隔的标签元素,那我也要获取离<p class="selected">Hello Again</p>最近的<div>元素,如何获取呢?

笔者研究了差不多一个小时,才写出了以下解决方法,提供给有遇到同样问题的博友,同时也是给自己记录上一个知识点

1.利用preAll()方法解决,如下图

关于JQ获取同级元素问题(相邻、不相邻)

$(".selected").prevAll("div:first").css("background", "yellow");通过prevAll结合:first选择器来获取

同样的$(".selected").prevAll("div:nth-child(4)").css("background", "yellow");通过prevAll结合:nth-child选择器来获取

要注意的一点是,如果利用nth-child()来取,这里是4,也就是说,它是从上自下来寻找标签的,跟:first选择器这种方法不一样。


以上为笔者分享的经验,鉴于笔者也是初学阶段,但个人认为分享才能进步,如其他大神有更好的方法解决,希望能提出宝贵的意见,我们共同进步关于JQ获取同级元素问题(相邻、不相邻)