JQuery/PHP

jQuery 如何判断元素是否有子节点

也想出现在这里?联系我们
创客云

方法:1、用 children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的 jQ 对象;2、用 length 检测子节点个数是否为 0,语法“对象.length==0”,如果个数为 0 则没有子节点,反之则有。

1、使用 children()获取该元素下的所有子集元素

也想出现在这里?联系我们
创客主机

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

  1. $(selector).children()

会返回一个包含所有子节点的 jQuery 对象

2、利用 length 属性判断子节点的个数是否为 0

length 属性可以获取指定 jQuery 对象中元素的数目

只需要判断获取的子节点个数是否为 0 即可

  1. jQuery对象.length==0

子节点个数为 0,则没有子节点

子节点个数不为 0,则有子节点

实现示例:

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script src="js/jquery-1.10.2.min.js"></script>
  6.         <style>
  7.             .div,
  8.             div * {
  9.                 display: block;
  10.                 border: 2px solid lightgrey;
  11.                 color: lightgrey;
  12.                 padding: 5px;
  13.                 margin: 15px;
  14.             }
  15.         </style>
  16.  
  17.         <script>
  18.             $(document).ready(function() {
  19.                 $("button").on("click", function() {
  20.                     var len=$("ul").children().length;
  21.                     console.log("ul元素中有子节点,个数为:"+len);
  22.                     $("ul").children().css({
  23.                         "color": "red",
  24.                         "border": "2px solid red"
  25.                     });
  26.                 });
  27.             });
  28.         </script>
  29.     </head>
  30.  
  31.     <body class="ancestors">
  32.         <div style="width:500px;">div (父节点)
  33.             <ul>ul (指定元素)
  34.                 <li>li (子节点1)
  35.                     <span>span (孙节点1)</span>
  36.                 </li>
  37.                 <li>li (子节点2)
  38.                     <span>span (孙节点2)</span>
  39.                 </li>
  40.                 <li>li (子节点3)
  41.                     <span>span (孙节点3)</span>
  42.                 </li>
  43.             </ul>
  44.         </div>
  45.         <button>检测ul元素是否有子节点</button>
  46.     </body>
  47.  
  48. </html>

jQuery 如何判断元素是否有子节点

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!