Question

我有一个日历，其中每天包含一个相同的class。我想更改类的颜色（表中的某些框），其中包含一个字符“ C”。我可以使用jquery找到它，但是当我尝试更改它时，它会使用该class来更改每个元素，因此我尝试使用this，但是它不起作用。。这是代码

   if(($(".tribe-events-month-event-title > a").text()).includes("C")){
     $(this).css("background-color","red");
   }

我也尝试过此操作，但是它用class

更改了每个元素

   var aaa = $(".tribe-events-month-event-title > a")
   if(aaa.text().includes("C")){
     aaa.css("background-color","red");
   }

Answer 1

问题是 aaa 包含满足选择器条件的所有元素（.tribe-events-month-event-title> a）。因此，如果其中任何一个包含 C ，则您正在应用aaa.css("background-color","red");，这会使所有 aaa 元素变为红色。您要做的就是遍历每个 aaa 元素并检查条件。

var aaa = $(".tribe-events-month-event-title > a")
 aaa.each(function(e) {
   if($(this).text().includes("C")){
     $(this).css("background-color","red");
   }
 })

Codepen：https://codepen.io/ashfaq_haq/pen/bGGooLz

Answer 2

jQuery有一个方便的:contains伪选择器：

$(".tribe-events-month-event-title > a:contains('C')")
  .css("background-color","red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>

Answer 3

您可以使用jquery :contains避免循环：

 var elements = $(".tribe-events-month-event-title > a:contains('C')");
elements.css("background-color","red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a href="#">A</a>
</div>
<div class="tribe-events-month-event-title">
  <a href="#">C</a>
</div>
<div class="tribe-events-month-event-title">
  <a href="#">C</a>
</div>

Answer 4

filter或:contains在这里最优雅

$(".tribe-events-month-event-title > a").filter(function() {
   return $(this).text().includes("C");
 }).css("background-color","red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>

$(".tribe-events-month-event-title > a:contains('C')").css("background-color","red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>

Answer 5

我建议使用.each()和.css(propertyName, function)。
由于已经有了.each()的答案，所以我只添加一个.css()：

.css（propertyName，function）

propertyName 类型：字符串 CSS属性名称。功能类型：函数（整数索引，字符串值）=>字符串或数字该函数返回要设置的值。这是当前元素。接收元素在集合中的索引位置和旧值作为参数。

$(".tribe-events-month-event-title > a").css("background-color", function(_, oldValue) {
    if ($(this).text().includes("C")) {
        return "red";
    }
});

更改此元素的颜色

5 个答案: