Dado que uso jQuery 1.3+ todos excepto uno de los exámenes cronometrados lo estoy usando. La otra es simple javascript que encontré desde atrás en el 2000. Dejé de seguir esa ruta ya que me tomó alrededor de 150 segundos ejecutar la prueba. He leído bastantes páginas web de optimización jQuery relacionadas con la selección de un solo elemento. Un '#id' es el mejor caso para usar eso, pero ahora tengo el problema de marcando todas las casillas de verificación en una columna en una tabla bastante grande que tiene múltiples columnas de casilla de verificación.¿Cuál es la forma más rápida de seleccionar una gran cantidad de casillas de verificación y de seleccionarlas?
Lo que he hecho es una configuración de la página crea 20.000 filas de la tabla con dos columnas de casilla de verificación. El objetivo es verificar la segunda columna para ver cuánto tiempo tomó, y luego desmarcarlos y ver cuánto tiempo tomó. Obviamente, queremos el tiempo más bajo. Solo uso IE6 y 7 y en mi caso todos mis usuarios harán lo mismo.
20.000 filas que usted dice? Eso es lo que dije también, pero esto va a la producción (fuera de mi alcance) y es demasiado tarde para cambiar ahora. Estoy tratando de lanzar un granizo con 1 segundo restante en el reloj. Además, aprendí que input.chkbox no es el selector más rápido (para IE7). :)
La pregunta es, ¿hay una mejor manera de hacer esto jQuery o de otra manera? Me encantaría que se ejecutara en menos de medio segundo en mi máquina.
Así que usted no tiene que volver a escribir toda la basura que ya he hecho aquí es el material de prueba que se me ocurrió:
Actualizado mañana 4/14 a incluir, además, pruebas de tiempo:
<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>
No me refiero a ser inútil, pero 20k filas en una página es simplemente un mal diseño. Deberías arreglar ESO. :) –
Bueno ... no es broma. :) ¡No lo hice! En este momento no hay tiempo suficiente para arreglarlo para este lanzamiento. Será lo primero que debe hacer en la próxima versión. Sin embargo, este proyecto ha planteado muchos desafíos "interesantes" hasta el momento. – rball