Skip to content

Instantly share code, notes, and snippets.

@alexscordellis

alexscordellis/gist:170290

Created August 19, 2009 11:04
Show Gist options
  • Save alexscordellis/170290 to your computer and use it in GitHub Desktop.
Save alexscordellis/170290 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery "ancestor descendant" selector is much slower than "parent > child" when used in find() in large page
Raw
gistfile1.js
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2",{uncompressed:true});
</script>
</head>
<body>
<div id="trigger1">build table</div>
<div id="trigger2">find cells with space</div>
<div id="trigger3">find cells with arrow</div>
<table id="foo">
<tbody>
</tbody>
</table>
<script>
var numRows = 2000;
var rowsToFind = 2;
var numCells = 5;
var cellsToFind = 2;
function BuildTable() {
for(j = 0; j != numRows; j++) {
var cells = "";
for (i = 0; i != numCells; i++) {
cells += '<td class="col_' + i + '"><span class="main"> ' + (numCells*j + i) + '</span></td>';
}
var row = '<tr class="row_' + j +'" >' + cells + '</tr>';
$("#foo").find("tbody").append(row);
}
};
function FindRow(j) { return $("tr.row_"+j); }
function FindCellSpace(row, i) { return row.find("td.col_"+i+" span.main"); }
function FindCellArrow(row, i) { return row.find("td.col_"+i+" > span.main"); }
function FindCellsSpace() {
for(j = 0; j != rowsToFind; j++) {
var row = FindRow(j);
for(i = 0; i != cellsToFind; i++) {
var cell = FindCellSpace(row, i);
cell.text('Space selector ' + i + ' ' + j);
}
}
};
function FindCellsArrow() {
for(j = 0; j != rowsToFind; j++) {
var row = $("tr.row_"+j);
for(i = 0; i != cellsToFind; i++) {
var cell = FindCellArrow(row, i);
cell.text('Arrow selector ' + i + ' ' + j);
}
}
};
$(function() {
$("#trigger1").click(BuildTable);
$("#trigger2").click(FindCellsSpace);
$("#trigger3").click(FindCellsArrow);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment