getElementsByClassName 加上这个元素内数据的值过滤器？

Question

我需要为函数添加过滤器。

我在页面中有不同的元素，类为 a-text-center table-border，但我需要代码仅在元素值大于 1 时才能工作，因此其他元素不会受到脚本的影响。

我无法在代码中添加任何内容，例如 ID 或任何其他元素以将其与其他元素区分开来，因此区分它的唯一方法是使用该元素内数字的value。

元素示例：

<td class="a-text-center table-border">4</td>

在这种情况下，值为4。

这是脚本：

$(document).ready(function() {
  var x = (document).getElementsByClassName('a-text-center table-border');
  for (var i = 0; i < x.length; i++)
    x.item(i).className += " bordertopred";

Answer 1

首先，请注意td 元素没有value。您要阅读的是元素的innerText。这可以在从 DOM 中选择必要的元素后使用filter() 来完成。

还请注意，如果您在页面中包含 jQuery，您也可以使用它来完成您需要的工作。下面是两个版本的代码，一个使用 jQuery，另一个使用纯 JS。

首先是普通的 JS：

document.addEventListener('DOMContentLoaded', () => {
  let valueToMatch = '4';
  let elements = Array.from(document.querySelectorAll('.a-text-center.table-border')).filter(el => el.innerText.trim() === valueToMatch);
  elements.forEach(el => el.classList.add("bordertopred"));
});

td {
  padding: 10px; 
}
.bordertopred {
  background-color: #CC0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="a-text-center table-border">1</td>
    <td class="a-text-center table-border">2</td>
    <td class="a-text-center table-border">3</td>
    <td class="a-text-center table-border">4</td>
  </tr>
</table>

这将是 jQuery 等价物：

jQuery($ => {
  let valueToMatch = '4';
  $('.a-text-center.table-border').filter((i, el) => el.innerText.trim() === valueToMatch).addClass('bordertopred');
});

td {
  padding: 10px; 
}
.bordertopred {
  background-color: #CC0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="a-text-center table-border">1</td>
    <td class="a-text-center table-border">2</td>
    <td class="a-text-center table-border">3</td>
    <td class="a-text-center table-border">4</td>
  </tr>
</table>

Answer 2

我不明白。 不能在函数中添加if 语句？

<script>
$(document).ready(function(){
    var x = (document).getElementsByClassName('a-text-center table-border');
for(var i = 0; i < x.length; i++) {
   if (i > 1)
     x.item(i).className += " bordertopred";
}
</script>

我也倾向于使用x.item(i).className.add('yourclass');