jquery获取父级的同级的子元素

一、知识介绍

1、jquery获取父级元素用parent()

$(this).parent('ul');

2、jquery获取同级元素用siblings()

$(this).parent('ul').siblings();

3、jquery获取子元素用find()

$(this).parent('ul').siblings().find('li');

二、实例

如下图所示：

需求： 要实现点击“工作区”下面的元素和点击“我的账号”下面的元素，来改变背景样式

实现：

1、html

<!-- 左边导航栏 start -->
<div class="sidebar-nav">
	<a href="#dashboard-menu" class="nav-header" data-toggle="collapse">
		<span style="font-weight: bold;font-size: 16px;">工作区</span>
	</a>
	<ul id="dashboard-menu" class="nav nav-list collapse in">
		<li class="active">
		    <a href="#" οnclick="showAtRight('/manager/index')">主 页</a>
		</li>
		<li>
		    <a href="#" οnclick="showAtRight('/manager/course')">课程管理</a>
		</li>
		<li>
		    <a href="#" οnclick="showAtRight('/manager/carousel')">轮播配置</a>
		</li>
		<li>
		    <a href="#" οnclick="showAtRight('/manager/classify')">课程分类管理</a>
		</li>
		<li>
		    <a href="#" οnclick="showAtRight('/manager/user')">用户管理</a>
		</li>
	</ul>
	<a href="#accounts-menu" class="nav-header" data-toggle="collapse">
		<span style="font-weight: bold;font-size: 16px;">我的账号</span>
	</a>
	<ul id="accounts-menu" class="nav nav-list collapse in">
	        <li οnclick="showAtRight('/manager/personal')">
                    <a href="#">个人信息</a>
                </li>
	        <li>
                    <a href="loginManager">退出</a>
                </li>
        </ul>
</div>
<!-- 左边导航栏 end -->

2、jquery

$(document).ready(function(){
    // 左边导航栏控制
    $('.sidebar-nav ul li').click(function(){
	$(this).addClass('active');
	$(this).siblings().removeClass('active');
	$(this).parent('ul').siblings().find('li').removeClass('active');
    });
});

最后，大家如果发现我写的有错误的话，欢迎评论指出哦，共同进步。觉得我写的不错的，可以关注下哦^v^