jQuery 选择器选项以访问 DOM 元素

Question

我有以下table。我想检查某些行和列 (col) 是否存在。在我使用 ids 之前它已经足够快了，但现在我直接使用 DOM 和 jQuery 中的 index() 而没有 ids。但它肯定更慢！这是我的 table:

**************************************************
* 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 *           *
* ...  * ... * ... * ... * ... * ... * ... * ... *
**************************************************

在 table 中，您可以看到 table 个单元格的 class 个名称。这些标签有一个名为 "row" 的 class。 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);

现在你有一个 table 单元格的平面数组，你可以简单地迭代它们，例如下面的（无意义的）函数删除所有 table 单元格，这些单元格在 table行。 :)

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

jQuery 选择器选项以访问 DOM 元素

jQuery selector choice to access DOM elements

jquery

dom