jquery如何获取当前被点击元素之外的同级元素

思路:获取被点击元素之外的元素,使用remove()方法删除节点。

下面进行实例演示:

实例一:    点击某个div后,删除同级的其余div元素:

1、HTML结构

<div class="content">

    <div class="test">1</div>

    <div class="test">2</div>

    <div class="test">3</div>

</div>

2、jquery代码

$(function(){
	$(".test").click(function() {
		// 使用siblings获取被点击元素之外的同级元素,然后使用remove()删除
		$(this).siblings().remove();
	});
});

示例二:    

1、html

 <ul class="user-menu-nav-block">
	<a href="me.html">
	    <li class="user-menu-nav-cur">主页 <span>></span></li>
	</a>
	<a href="/user/course.html">
	    <li class="user-menu-nav">我的课程  <span>></span></li>
	</a>
	<a href="/user/collect.html">
	    <li class="user-menu-nav">我的收藏  <span>></span></li>
	</a>
	<a href="/user/info.html">
	    <li class="user-menu-nav">个人信息  <span>></span></li>
	</a>
	<a href="/user/qa.html">
	    <li class="user-menu-nav">答疑  <span>></span></li>
	</a>
 </ul>	

2、jquery代码

$(document).ready(function(){
	// 左边导航栏控制
	$('.user-menu-nav-block a').click(function(){
		$(this).find('li').addClass('user-menu-nav-cur');       //find是获取this下的子元素,即当前点击的元素
		$(this).find('li').removeClass('user-menu-nav');
		$(this).siblings().find('li').addClass('user-menu-nav');//siblings是获取前被点击元素之外的同级元素
		$(this).siblings().find('li').removeClass('user-menu-nav-cur');
	});
});



  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值