将类与表格行匹配答案

【问题标题】：Match class against table row将类与表格行匹配
【发布时间】：2023-04-04 18:47:01
【问题描述】：

我有以下代码：

var sum = 0;
    $("#scLD > tbody > tr > td:nth-child(2)").each(function () {
        var x = $(this);
        if (x.parent().hasClass(/^onHandTdmm([0-9]+)$/)) {
            var y = parseFloat(x.text(), 10) || 0;
            sum += y;
        }
        if (x.parent().hasClass("onHandGrand")) {
            x.html(sum);
            sum = 0;
        }
    })

我正在尝试搜索一列，如果任何单元格父级（行）包含某个类名，后跟任何单个数字以添加它。所以基本上如果父级包含 onHandTdmm 类后跟任意数字（例如 onHandTdmm1）。我想出的正则表达式 (/^onHandTdmm([0-9]+)$/) 只是在我的函数中返回 0。

【问题讨论】：

不确定是否可以在 hasClass() 方法中使用正则表达式？但是：stackoverflow.com/questions/13878759/…
您是否有以onHandTdmm 开头但后面没有数字的课程？您可以只使用选择器 [class*=onHandTdmm] 在类中的任何位置查找该字符串。

标签： javascript jquery regex

【解决方案1】：

与其遍历所有单元格并匹配具有该类的父级，为什么不只查找具有该类的行，然后根据需要操作该单元格？

对于正则表达式部分，您需要使用.test，因为 jQuery 选择器本身并不处理正则表达式。

工作 JSFiddle：https://jsfiddle.net/j4d3zgqt/4/

var sum = 0;
$("#scLD > tbody > tr").each(function() {
    var $row = $(this);
    var $cell = $(this).find('td:nth-child(2)');

    if (/^onHandTdmm([0-9]+)$/.test($row.attr("class"))) {
        var y = parseFloat($cell.text(), 10) || 0;
        sum += y;
    }
    if ($row.hasClass("onHandGrand")) {
        $cell.html(sum);
        sum = 0;
    }
});

【讨论】：

【解决方案2】：

你需要转义：\( 而不是(。
不要 jquery-fy 一切，这个任务在 vanillajs 中更容易。

function TestCtrl() {
  var tests = document.querySelectorAll('.test');
  
  function hasClassHandTdmm(element) {
    var re = /onHandTdmm\([0-9]+\)/
    var parent = element.parentNode;
    
    if(re.test(parent.className)) {
      parent.classList.add('matches');
    }
    
  }
  
  
  Array.prototype.forEach.call(tests, hasClassHandTdmm);
}

document
  .addEventListener('DOMContentLoaded', TestCtrl);
;

.matches {
  background: pink;
}

<div class="onHandTdmm(1) ">
  <span class="test">TEST</span>
</div>

<div class="">
  <span class="test">TEST 2</span>
</div>

【讨论】：

类名中没有()，只有onHandTdmm1。

【解决方案3】：

我相信您可能对这项任务想得太多。根据我的理解，一个简单的 indexOf 命令应该可以为您提供类名的存在，然后您可以单独评估后面的整数。

【讨论】：

【解决方案4】：

一件事就是在上面提供的答案中尝试使用val() 而不是text() 函数。

【讨论】：

这与在.hasClass() 中使用正则表达式的问题有什么关系？
您不能在<td> 上使用.val()。