Question

jquery如何获取页面使用指定样式的个数

Answer 1

思路：在页面设计时就将指定的样式设置为一个class，然后应用到需要的元素上。那么此时可以通过类选择器来获取使用指定样式的个数

$("some_class").length;  // 获取应用了some_class的元素的个数

实例演示：本例将红色设置为一个类 red，并应用到不同的元素中去，然后可以通过上述方法获取应用的个数

1. 创建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>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{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;}

3. 编写jquery代码

   $(function(){ 
   	$("input:button").click(function() {
   		alert($(".red").length);
   	});
   });

4. 观察效果

   

Answer 2

	$(".cs").size();//或者
	$(".cs").length; //cs为样式 如<input type="text" class="cs" />