JQuery遍历元素的后代和同胞实现方法

网络编程 2024/11/15 佚名

3 2 1

1.遍历后代

children()

children() 方法返回被选元素的所有直接子元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">

find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

find()里必须加上selecter 如果不加就显示不了

所以里面必须加选择器例如find("*") find("span")

2.遍历同胞

siblings()

siblings() 方法返回被选元素的所有同胞元素。

next()

next()被选元素的下一个同胞元素

nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">


prev()
prev() 

prevAll() 

prevUntil() 

prev=previous=前面的
所以遍历的是指定元素的前面同胞 这个效果和next() 相仿 就不举例子了
3.过滤
first()
first() 方法返回被选元素的首个元素。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">


last()
last() 方法返回被选元素的最后一个元素。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">


eq() 
eq() 方法返回被选元素中带有指定索引号的元素。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">


filter() 
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。


<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").filter("#p2").each(function(i, e) {
    $("#info").html($("#info").html()+"("+$(this).attr("id")+")");
   });
 });
});
</script>




not() 
not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">


以上这篇JQuery遍历元素的后代和同胞实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

                                
                                
                                    jquery遍历元素 
                                
                                    标签：
                                        jquery遍历元素
                                     

                            
                        
                        
                            
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        
                            
                                
                                    上一篇
                                    JQuery实现DIV其他动画效果的简单实例
                                
                            
                            
                                
                                    下一篇
                                    AngularJS实现树形结构(ztree)菜单示例代码
                                
                            
                        
                        
                        狼山资源网 Copyright www.pvsay.com
                        
                            
                                
                                
                                    评论“JQuery遍历元素的后代和同胞实现方法”
                                
                            
                            
                                
                                    
                                        
                                            
                                                JQuery遍历元素的后代和同胞实现方法
                                            
                                            
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无“JQuery遍历元素的后代和同胞实现方法”评论...

JQuery遍历元素的后代和同胞实现方法

jquery遍历元素

JQuery实现DIV其他动画效果的简单实例

AngularJS实现树形结构(ztree)菜单示例代码

评论“JQuery遍历元素的后代和同胞实现方法”

友情链接