我想为所有.path元素添加一个类，但一次只添加10个。
我有以下代码：
$(".path").each(function(i) {
var e = $(this);
setTimeout(function(){
e.addClass('show');
}, 100);
});
这会一次为每个元素添加一个类，但是我怎样才能一次添加10个。
答案 0 :(得分：6)
您可以通过合并slice和普通for循环
var elem = $(".path");
for(i=0;i<elem.length;i+=10) {
setTimeout(function(i){
elem.slice(i,i+10).addClass("show")
}, 100 * i, i);
}
答案 1 :(得分：2)
您可以使用slice这样的方法
var first10Elements = $(".path").slice(0,10);
first10Elements.addClass('show');
您可以保留一个计数器counter
var counter = 0;
function addClass()
{
if ( counter > $(".path").size() )
{
return false;
}
var first10Elements = $(".path").slice(counter,counter+10);
first10Elements.addClass('show');
counter = counter+10;
setTimeout(function(){
addClass();
}, 100);
}
addClass();
此方法会一次将类show添加到10 path个元素，并在完成所有元素后停止。
你可以像这样概括它
function addClass(currentClass, newClass, counter)
{
$("." + currentClass ).slice(counter,counter+10).addClass( newClass );
setTimeout(function(){
if ( counter < $(".path").size() )
{
addClass(currentClass, newClass, counter+10);
}
}, 100);
}
addClass("path", "show", 0);
答案 2 :(得分：1)
尝试此选项。我认为用户想要同时添加.show所有元素.path。但现在，在评论中更好地解释。
<h1>Table sorting on page load with paging</h1>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
<h2>Second table below</h2>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
新选项
//$(".path").addClass("show);