在jquery中向filter函数添加计数器

zpf6vheq 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(129)

问题是计数器multipleitems。此时，这个变量正在计算页面中的所有td，而不是只计算内部文本大于1的td，但是添加.css的过滤器工作得很好，只是计数器不工作。下面的代码可以很好地将一些css添加到各种td上的指定类中。这段代码基本上过滤了具有上述类的td，以及td中大于1的值。我需要添加一个变量来计算有多少td满足这些要求。
提前感谢任何帮助…

$(document).ready(function () {
  var multipleitems = 0;
  var s = 0;
  var x = document.getElementsByClassName("a-text-center table-border");
  for (var i = 0; i < x.length; i++) {
    $("td")
      .filter(function () {
        return $(this).text() > "1";
      })
      .css("border-top-color", "rgb(0 217 150 / 38%)")
      .css("border-top-width", "5px")
      .css("font-size", "20px");
    multipleitems = s + 1;
  }
});

jquery

来源：https://stackoverflow.com/questions/77154289/issue-adding-counter-to-filter-function-in-jquery

1条答案

按热度按时间

irtuqstp1#

一个快速解决方案，将$("td")（“DOM中的所有TD”）的使用固定到更具体的选择器中，并使用.filter()匹配大于1的修剪textContent

jQuery($ => { // DOM ready and $ alias in scope

  $(".a-text-center.table-border td").filter((i, el) => +el.textContent > 1).css({
    borderTopColor: "rgb(0 217 150 / 38%)",
    borderTopWidth: "5px",
    fontSize: "20px"
  });

});

td {border: 2px solid red;}

<table class="a-text-center table-border">
  <tr><td>2</td><td>1</td><td>0</td><td>5</td></tr>
</table>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

此外，不要使用JS样式，而是使用CSS类来实现此目的：

jQuery($ => { // DOM ready and $ alias in scope

  $(".a-text-center.table-border td")
    .filter((i, el) => +$(el).text() > 1)
    .addClass("gt1");

});

td { border: 2px solid red; }

.gt1 {
   border-top-color: rgb(0 217 150 / 38%);
   border-top-width: 5px;
   font-size: 20px;
}

<table class="a-text-center table-border">
  <tr><td>2</td><td>1</td><td>0</td><td>5</td></tr>
</table>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

或者使用.toggleClass（）方法：

jQuery($ => { // DOM ready and $ alias in scope
  
  $(".a-text-center.table-border td").toggleClass(function() {
    return +$(this).text() > 1 && "gt1"
  });

});

td { border: 2px solid red; }

.gt1 {
   border-top-color: rgb(0 217 150 / 38%);
   border-top-width: 5px;
   font-size: 20px;
}

<table class="a-text-center table-border">
  <tr><td>2</td><td>1</td><td>0</td><td>5</td></tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-10-17

我来回答

在jquery中向filter函数添加计数器

1条答案

相关问题

热门标签

最新问答