jquery怎样获取一个元素下面相同子元素的个数？

1、siblings()，可以返回元素的所有同胞元素。

2、next()，可以获取到当前元素的下一个同胞元素。

3、nextAll()，可以获取到当前元素的所有跟随的同胞元素。

4、nextUntil()，可以获取到介于两个元素之间的所有跟随的同胞元素。

5、prev()，可以获取到当前元素的前一个同胞元素。

6、prevAll()，可以获取到当前元素的所有之前的同胞元素。

7、prevUntil()，可以获取到介于两个元素之间的所有之前的同胞元素。

jQuery的length 属性可以获取包含 jQuery 对象中元素的数目，所以获取input的个数可用如下代码实现

$('input')length;       // 所有input的数量，包括文本框、单选按钮、复选框、隐藏域等
$('input:text')length;  // 文本框的数量

示例代码如下

创建Html元素

<div class="box">
<span>点击按钮获取文本框数量：</span><br>
<div class="content">
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="jack"/>
<input type="text" name="url" value="tom"/>
</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;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
input[type='text']{width:200px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

编写jquery代码

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

观察效果

思路：在页面设计时就将指定的样式设置为一个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);
});
});

观察效果

---