删选器
Posted momo8238
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了删选器相关的知识，希望对你有一定的参考价值。
1.筛选器做左侧菜单实例
筛选器如下：
//当前点击的标签 $(this);
//获取某个标签的下一个标签
//获取某个标签的父标签，
//获取父亲的所有兄弟标签，
//添加样式移除样式
//$(‘.i1‘).addClass(‘hide‘)
//$(‘.i1‘).removeClass(‘hide‘)
//var v=$(this+"div") this+"div"组合有问题
//筛选器，在所有选到的标签中再进行一次筛选
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父亲
$(this).children() 孩子
$(this).siblings() 兄弟
$(‘#i1‘).find(‘#i1‘) 子子孙孙中查找
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color:blue; color:white; } .content{ min-height:50px; } .hide{ display:none; } </style> </head> <body> <div style="height:400px;width:200px;border-color:1px solid #dddddd"> <div class="item"> <div class="header">标题1</div> <div class="content">内容</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.header‘).click(function(){ $(this).next().removeClass(‘hide‘); $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘); }) </script> </body> </html>
两行可以并成一行,jquery 支持链式编程。
$(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)
以上是关于删选器的主要内容，如果未能解决你的问题，请参考以下文章