思路：在页面设计时就将指定的样式设置为一个class，然后应用到需要的元素上。那么此时可以通过类选择器来获取使用指定样式的个数
$("some_class")length; // 获取应用了some_class的元素的个数实例演示：本例将红色设置为一个类 red，并应用到不同的元素中去，然后可以通过上述方法获取应用的个数
创建Html元素
<div class="box"><span class="red">点击按钮获取应用了红色样式的元素的个数：</span><br>
<div class="content">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td class="red">5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<ul>
<li>Glen</li>
<li class="red">Tane</li>
<li>John</li>
<li class="red">Ralph</li>
</ul>
</div>
<input type="button" value="获取应用了红色样式的元素的个数">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox>span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
table{border-collapse:collapse;}
td{width:30px;height:30px;line-height:30px;text-align:center;border:1px solid green;}
li{margin:5px;list-style: none;}
red{color:red !important;}
编写jquery代码
$(function(){$("input:button")click(function() {
alert($("red")length);
});
});
观察效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
jquery的 length 属性用以获取包含 jQuery 对象中元素的数目：
$("a b li")length; // a类后代b类中包含的li元素的数量综合示例如下：
创建Html元素
<div class="box"><span>点击按钮获取li数量：</span><br>
<div class="content">
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
<div class="test">
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>Ralph</li>
</ul>
</div>
<div class="test">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
</div>
</div>
<input type="button" value="获取li的数量">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
ul{padding:5px 25px;border:2px dashed #cc6699;}
编写jquery代码
$(function(){$(":button")click(function() {
tol = $("content test li")length;
num = $("content test ul")map(function() {
return $(this)find("li")length;
})get()join(',');
alert("不同div下的li数量分别为："+num+",总数为："+tol+"。");
});
})
观察效果
以上就是关于jquery如何获取页面使用指定样式的个数全部的内容，包括:jquery如何获取页面使用指定样式的个数、jquery 遍历某个div 下的所有div怎么写、Jquery怎么遍历div里面的div里面的ul的li数量，有代码求修改等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）