• 技术文章 >web前端 >js教程

    jquery怎么判断指定子元素是否存在

    青灯夜游青灯夜游2022-02-28 15:24:26原创75

    判断方法:1、使用“$("父元素").has("子元素").length”语句,如果返回值为1,则指定子元素存在;2、使用“$("父元素").children("子元素").length”语句,如果返回值大于等于1,则指定子元素存在。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery判断指定子元素是否存在

    方法1:利用has() 方法

    has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("button").click(function() {
    					if ($("div").has("span").length) {
    						console.log("指定子元素存在")
    					} else {
    						console.log("指定子元素不存在")
    					}
    				});
    			});
    		</script>
    	</head>
    
    	<body>
    		<div style="border: 1px solid red;">
    			<p>子元素1</p>
    			<span>子元素2</span>
    		</div><br>
    		<button>指定子元素span是否存在</button>
    	</body>
    </html>

    1.gif

    方法2:使用children()

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

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("button").click(function() {
    					if ($("div").children("p").length) {
    						console.log("指定子元素存在");
    						console.log($("div").children("p").length);
    					} else {
    						console.log("指定子元素不存在");
    						console.log($("div").children("p").length);
    					}
    				});
    			});
    		</script>
    	</head>
    
    	<body>
    		<div style="border: 1px solid red;">
    			<p>子元素1</p>
    			<span>子元素2</span>
    			<span>子元素2</span>
    			<p>子元素3</p>
    			<p>子元素4</p>
    		</div><br>
    		<button>指定子元素是否存在</button>
    	</body>
    </html>

    2.gif

    【推荐学习:jQuery视频教程web前端

    以上就是jquery怎么判断指定子元素是否存在的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:聊聊Angular中的元数据(Metadata)和装饰器(Decorator) 下一篇:超实用的JavaScript调试技巧
    PHP编程就业班

    相关文章推荐

    • jquery如何控制css来删除元素• 聊聊使用jQuery如何实现动画(代码详解)• 总结分享一些使用jQuery实现的DOM操作(收藏)• jQuery中如何进行遍历?几种遍历方式浅析• 看看这些jQuery常见面试题,帮助你更好理解基础知识!• jquery怎么移除元素属性

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网