Question

我有下表。我想检查一下是否存在某些行和列（col）。在我使用id之前，这已经足够快了，但现在我直接在jQuery中使用带有index（）的DOM而没有id。但它肯定更慢！这是我的表：

**************************************************
* line * col * col * col * col * col *           *
* line * col * col *                             *
* line * col * col * col * col * col * col * col *
* line * col * col * col *                       *
* line * col * col * col * col * col *           *
* line * col * col * col * col * col *           *
* ...  * ... * ... * ... * ... * ... * ... * ... *
**************************************************

在表格中，您可以看到表格单元格的类名称。标签有一个名为“row”的类。 col数可能会有所不同。我需要一个脚本来检查/访问这些行和列。我有以下脚本：

function isRow( r ) {
    var row = $( ".row" ).eq(r);
    return ( typeof row != "undefined" ? true : false );
}
function getRow( r ) {
    var row = $( ".row" ).eq(r);
    return ( typeof row == "undefined" ? null : row );
}
function isCell( r, c ) {
    var col = $( ".row" ).eq(r).children(".col").get(c);
    return ( typeof col == "undefined" ? true : false );
}
function getCell( r, c ) {
    var col = $( ".row" ).eq(r).children(".col").eq(c);
    return ( typeof col == "undefined" ? null : col );
}

我做错了什么？有没有更快的方式来访问DOM元素？可能有一个更好的选择器，但我不知道如何重写我的代码。

有什么想法吗？

哈德

Answer 1

如果性能是一个很大的问题，那么使用简单的JS for / while循环以及尽可能多的变量缓存会更好，例如：

// returns an array with a data obj about each cell, with following format:
// { row: x, col: y } + any properties added by the function passed as param
// @param {element} table - The table element you want to loop
// @param {function} fn - The function to execute on each cell, with parameter (cell)
function loopTableCells(table, fn) {
  var rows = table.children, // note: native children prop is faster than jQuery
      len = table.children.length, cell, cellArr = [], cellCount, cellData;
  for (var i = 0; i < len; i++) {
    cell = rows[i].firstChild;
    cellCount = 0;
    if (cell) { // in case the row has no children, do nothing
      do { // it has at least one child, so do at least once
        cellData = fn(cell);
        cellData.row = i; // store the table row index
        cellData.col = cellCount;
        cellArr.push(cellData);
        cellCount++;
        cell = rows[i].nextSibling;
      } while (rows[i].nextSibling);
    }
  }
  return cellArr;
}

然后您可以像这样使用此功能：

function getCellData(cell) { // store any cell property you want in obj
  var obj = {};
  obj.hasChildren = (cell.firstElementChild ? true : false);
  obj.hasText = (cell.textContent ? true : false);
  obj.element = cell;
  if (cell.id) obj.id = cell.id;
  if (cell.className) obj.class = cell.className;
  return obj; 
}

var tableData = loopTableCells($('#myTable'), getCellData);

现在你有一个平坦的表格单元格，你可以简单地迭代它们，例如下面的（无意义）函数删除表格行中具有不均匀索引的所有表格单元格。：）

$.each(tableData, function(i, val) {
  if (val.col/2 !== parseInt(val.col/2)) 
    $(val.element).remove();
}

jQuery选择器选择访问DOM元素

1 个答案: