站長(zhǎng)資訊網(wǎng)
計(jì)算方法：1、使用find()獲取指定元素下的所有（包括子集的子集）子集元素，語法“指定元素對(duì)象.find(filter)”，會(huì)返回一個(gè)元素集合；2、使用length屬性獲取元素集合所包含的元素的個(gè)數(shù)即可，語法“元素集合.length”。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
jquery計(jì)算某元素下有多少元素，就是計(jì)算該元素下的所有（包括子集的子集）子集元素的個(gè)數(shù)。
實(shí)現(xiàn)思想：
-
使用find()方法獲取所有子集元素，會(huì)返回一個(gè)元素集合
-
使用length屬性獲取元素集合的長(zhǎng)度，即元素集合所包含的元素的個(gè)數(shù)
實(shí)現(xiàn)代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <style> .div, div * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function() { $("button").on("click", function() { $("ul").find("*").css({ "color": "red", "border": "2px solid red" }); var len=$("ul").find("*").length; console.log("ul元素下有"+len+"個(gè)元素"); }); }); </script> </head> <body class="ancestors"> <div style="width:500px;">div (父節(jié)點(diǎn)) <ul>ul (指定元素) <li>li (子節(jié)點(diǎn)1) <span>span (孫節(jié)點(diǎn)1)</span> </li> <li>li (子節(jié)點(diǎn)2) <span>span (孫節(jié)點(diǎn)2)</span> </li> <li>li (子節(jié)點(diǎn)3) <span>span (孫節(jié)點(diǎn)3)</span> </li> </ul> </div> <button>選取ul的所有子元素，并計(jì)算個(gè)數(shù)</button> </body> </html>
可以看出，輸出6個(gè)，對(duì)不對(duì)呢？
我們來核對(duì)下：3個(gè)li子元素+3個(gè)span孫元素=6，OK是對(duì)的！
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
