5
因爲我使用jQuery 1.3+除了一個定時測試正在使用它。另一個是我在2000年發現的純javascript。我停止了這條路線，因爲它需要大約150秒來運行測試。我已經閱讀了很多與選擇單個元素相關的jQuery優化網頁。 '#id'是使用它的最好情況，但現在我有檢查一個列中的所有複選框在一個相當大的表中有多個複選框列的問題。什麼是選擇大量複選框並取消/選擇它們的最快方法？
我所做的是設置一個頁面，創建兩個複選框列的20,000錶行。目標是檢查第二欄，看看花了多長時間，然後取消選中它們，看看花了多長時間。顯然我們想要最短的時間。我只使用IE6和7，在我的情況下，我的所有用戶都會這樣做。
你說20000行？這也是我所說的，但這是生產（我手中沒有），現在改變已經太遲了。我只是想在時鐘上留下1秒鐘的雹子。另外，我知道input.chkbox不是最快的選擇器（對於IE7）！ :)
問題是，有沒有更好的方法來做這個jQuery或以其他方式嗎？我希望它能在我的機器上運行不到半秒鐘。
所以你不必重新輸入所有我已經在這裏做的廢話是測試的東西，我想出了：
更新上午4/14，包括進一步的試運行時間：
<form id="form1" runat="server">
<div>
<a href="#" id="one">input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="two">#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="three">#myTable tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="four">tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="five">input[id^='chkbox']</a><br />
<a href="#" id="six">.chkbox</a><br />
<a href="#" id="seven">input.chkbox</a><br />
<a href="#" id="eight">#myTable input.chkbox</a><br />
<a href="#" id="nine">"input.chkbox", "tr"</a><br />
<a href="#" id="nine1">"input.chkbox", "tr.myRow"</a><br />
<a href="#" id="nine2">"input.chkbox", "#form1"</a><br />
<a href="#" id="nine3">"input.chkbox", "#myTable"</a><br />
<a href="#" id="ten">input[name=chkbox]</a><br />
<a href="#" id="ten1">"input[name=chkbox]", "tr.myRow"</a><br />
<a href="#" id="ten2">"input[name=chkbox]", "#form1"</a><br />
<a href="#" id="ten3">"input[name=chkbox]", "#myTable"</a><br />
<a href="#" id="ten4">"input[name=chkbox]", $("#form1")</a><br />
<a href="#" id="ten5">"input[name=chkbox]", $("#myTable")</a><br />
<a href="#" id="eleven">input[name='chkbox']:checkbox</a><br />
<a href="#" id="twelve">:checkbox</a><br />
<a href="#" id="twelve1">input:checkbox</a><br />
<a href="#" id="thirteen">input[type=checkbox]</a><br />
<div>
<input type="text" id="goBox" /> <button id="go">Go!</button>
<div id="goBoxTook"></div>
</div>
<table id="myTable">
<tr id="headerRow"><th>Row #</th><th>Checkboxes o' fun!</th><th>Don't check these!</th></tr>
<% for(int i = 0; i < 20000;i++) { %>
<tr id="row<%= i %>" class="myRow">
<td><%= i %> Row</td>
<td>
<input type="checkbox" id="chkbox<%= i %>" name="chkbox" class="chkbox" />
</td>
<td>
<input type="checkbox" id="otherBox<%= i %>" name="otherBox" class="otherBox" />
</td>
</tr>
<% } %>
</table>
</div>
<script type="text/javascript" src="<%= ResolveUrl("~/") %>Javascript/jquery.1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
function run(selectorText, el) {
var start = new Date();
$(selectorText).attr("checked", true);
var end = new Date();
var timeElapsed = end-start;
$(el).after("<br />Checking Took " + timeElapsed + "ms");
start = new Date();
$(selectorText).attr("checked", false);
end = new Date();
timeElapsed = end-start;
$(el).after("<br />Unchecking Took " + timeElapsed + "ms");
}
function runWithContext(selectorText, context, el) {
var start = new Date();
$(selectorText, context).attr("checked", true);
var end = new Date();
var timeElapsed = end-start;
$(el).after("<br />Checking Took " + timeElapsed + "ms");
start = new Date();
$(selectorText, context).attr("checked", false);
end = new Date();
timeElapsed = end-start;
$(el).after("<br />Unchecking Took " + timeElapsed + "ms");
}
$("#one").click(function() {
run("input[id^='chkbox'][type='checkbox']", this);
});
$("#two").click(function() {
run("#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']", this);
});
$("#three").click(function() {
run("#myTable tr.myRow input[id^='chkbox'][type='checkbox']", this);
});
$("#four").click(function() {
run("tr.myRow input[id^='chkbox'][type='checkbox']", this);
});
$("#five").click(function() {
run("input[id^='chkbox']", this);
});
$("#six").click(function() {
run(".chkbox", this);
});
$("#seven").click(function() {
run("input.chkbox", this);
});
$("#eight").click(function() {
run("#myTable input.chkbox", this);
});
$("#nine").click(function() {
runWithContext("input.chkbox", "tr", this);
});
$("#nine1").click(function() {
runWithContext("input.chkbox", "tr.myRow", this);
});
$("#nine2").click(function() {
runWithContext("input.chkbox", "#form1", this);
});
$("#nine3").click(function() {
runWithContext("input.chkbox", "#myTable", this);
});
$("#ten").click(function() {
run("input[name=chkbox]", this);
});
$("#ten1").click(function() {
runWithContext("input[name=chkbox]", "tr.myRow", this);
});
$("#ten2").click(function() {
runWithContext("input[name=chkbox]", "#form1", this);
});
$("#ten3").click(function() {
runWithContext("input[name=chkbox]", "#myTable", this);
});
$("#ten4").click(function() {
runWithContext("input[name=chkbox]", $("#form1"), this);
});
$("#ten5").click(function() {
runWithContext("input[name=chkbox]", $("#myTable"), this);
});
$("#eleven").click(function() {
run("input[name='chkbox']:checkbox", this);
});
$("#twelve").click(function() {
run(":checkbox", this);
});
$("#twelve1").click(function() {
run("input:checkbox", this);
});
$("#thirteen").click(function() {
run("input[type=checkbox]", this);
});
$('#go').click(function() {
run($('#goBox').val(), this);
});
});
</script>
</form>
我並不意味着無益，但在一頁中的20k行只是壞的設計。你應該解決這個問題。 :) – 2009-04-13 23:24:19
呃...沒有開玩笑。 :)我沒有做到！現在沒有足夠的時間爲此版本修復它。這將是下一個版本首先要做的事情。儘管如此，這個項目帶來了許多「有趣」的挑戰。 – rball 2009-04-13 23:31:07