版权声明:黄河爱浪,[email protected], https://blog.csdn.net/u013350495/article/details/82750700
本篇文章介绍jQuery的兄弟元素选择器
什么是兄弟元素?
<ul id="list">
<li class="li-1">web-7258</li>
<li class="li-2">web前端</li>
<li class="li-3">[email protected]</li>
<li class="li-4">web梦之蓝</li>
<li class="li-5">jQuery之美</li>
</ul>
兄弟接点的查找方式有很多,本文章只列举出实用性较高的方式
1、$(selector).prevAll( selector )
功能描述:获得集合中每个匹配元素的所有前面的兄弟元素,选择性筛选的选择器。
$(".li-3").prevAll("li"); // ['li-1','li-2']
2、$(selector).nextAll( selector )
功能描述:获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
$(".li-3").nextAll("li"); // ['li-4','li-5']
3、$(selector).siblings( selector )
功能描述:获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
$(".li-3").siblings("li"); // ['li-1','li-2','li-4','li-5']
为了能让上面所介绍的方法做点什么,设当前需求如下:
当 <li> 触发点击事件后:
1:当前所点击的元素设置设置 颜色为 蓝色,字体大小为 20px;
2:所点击元素之前的所有兄弟节点设置颜色为 绿色,字体大小为 16px;
3:所点击元素之后的所有兄弟节点设置颜色为 红色,字体大小为 16px;
实现代码如下:
$("#list").on("click",">li",function () {
/* 当前触发事件元素 之前 的所有兄弟元素设置颜色为 绿色 */
$(this).prevAll("li").css("color","#00ff00");
/* 当前触发事件元素 之后 的所有兄弟元素设置颜色为 红色 */
$(this).nextAll("li").css("color","#ff0000");
/* 当前触发事件元素的所有兄弟元素设置字体大小为 16px */
$(this).siblings("li").css("font-size","16px");
/* 当前触发事件元素设置 颜色为 蓝色,字体大小为 20px*/
$(this).css({
"color":"#0000ff",
"font-size":'20px'
});
});
上述代码不是合理的写法,只为体现这三种方法的功能。
使用兄弟元素选择器的前提是自己能写得一手好HTML代码,结构性强,才能良好的运用兄弟元素选择器,在处理表单体验这一块,兄弟元素选择器尤为重要。是jQuery插件开发者必须掌握的知识点。
jQuery之美系列文章基础篇已经告一段落,后续将会是基础篇文章内容的实战
下篇预告:jQuery之美——单选框/复选框美化
更多精彩文章,敬请持续关注——WEB前端梦之蓝
用微信扫描下方的二维码可直接关注该公众号哦,或者打开微信公众号搜索 “web-7258”,关注后会在第一时间将最新文章推送给您哦