ZKX's LAB

jQuery怎样获取当前元素的父元素同级元素子元素 jq同级兄弟节点

2021-04-09知识13

jquery如何取同级元素的子级? jquery中同2113级元素即兄弟元素用siblings()获取,5261子级元4102素用children()获取,所以可以使用如下代码取同级元素的子级:('selector').siblings().children();示例代码:1653html xmlns=\"http://www.w3.org/1999/xhtml\">;TESThtml;charset=utf-8\"/>;com/jquery-latest.js\">;<;/script>;div{padding:10px;margin:10px;}div.xiyouji{width:250px;height:200px;border:4px solid green;}div.sun-niu{border:4px solid red;}div.sun-niu div{border:2px solid blue;}(function(){(\"div.sun-niu\").click(function(){nephew=$(this).siblings().children().text();if(nephew)option=nephew;elseoption=\"没有侄子;alert(option);});})孙悟空牛魔王红孩儿显示效果:点击孙悟空后,就显示了同级的子级元素,也就是他侄子红孩儿。

JQuery中的siblings()是什么意思 jQuery siblings()方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。实例演示:点32313133353236313431303231363533e59b9ee7ad9431333337393461击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式创建Html元素123456789<;div class=\"box\">;<;span>;点击li元素设置红色并去除其余所有同胞元素的红色样式:<;/span>;<;div class=\"content\">;栗子<;/li>;<;li>;李子<;/li>;<;li>;梨子<;/li>;<;li>;荔枝<;/li>;<;/div>;设置css样式12345div.box{width:300px;padding:20px;margin:20px;border:4px dashed#ccc;}div.box span{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid#ff6666;}li{padding:10px;}.red{color:red;}编写jquery代码123456$(function(){$(\"li\").click(function(){$(this).addClass('red');设置被点击元素为红色$(this).siblings('li').removeClass('red');去除所有同胞元素的红色样式 })})观察效果点击李子,李子呈红色,其余li元素正常然后点击荔枝,荔枝成红色,其余元素包括此前红色的李子都变成常规颜色

JQuery,如何清除,除了点击的元素以外,其他所有元素 可以使用2113Jquery中的siblings()和remove()方法实现。5261实现原理主要是使用siblings获取被4102点击元素1653之外的同级元素,然后使用remove()删除。完整的代码如下:运行的效果如下:例如当点击DIV内容为2的框时,其他的DIV被清除,内容为2的框移到最顶,点击后的效果图如下:扩展资料:如果想对移到最顶的框进行一定的突出显示处理,比如给个背景颜色,字体加大,可以利用css()方法,代码如下:doctypehtml>;JQuery例子script>;(function(){(\".class1\").click(function(){(this).siblings().remove();(this).css({\"background-color\":\"yellow\",\"font-size\":\"50px\"});});});1234main{width:640px;height:500px;margin:0 auto;border:1px solid red;}class1{width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;}运行的效果如下:

#jq同级兄弟节点

随机阅读

qrcode
访问手机版