jQuery循环遍历相同的类名

Question

我有一些具有相同类名data的元素，例如，它们可能如下所示：

<p class="data">AAA</p>
<p class="data">BBB</p>
<p class="data">CCC</p>
<p class="data">DDD</p>

现在我想循环遍历类名为data的所有元素，并查看它们是否与字符串匹配，比如AAA。如果是，则将该元素设为红色。

$(".data").each(function() {
    if (this.val() == "AAA") {
        $(this).css("color", "red");
    }
});

但是，这不起作用。有什么想法吗？

Answer 1

this应为$(this)，val()应为html()。 val()用于具有值属性的元素，如输入字段和单选按钮等。 html()获取元素内的html。 this是jQuerys $(this)的vanilla Javascripts版本。

$(document).ready(function(){
    $(".data").each(function() {
        if ($(this).html() == "AAA") {
            $(this).css("color", "red");
        }
    });
});

Answer 2

无需遍历类名来实现该结果。 你可以简单地写

$('.data:contains("AAA")').css('background-color', 'red');

注意：只有在您确定其他标记不包含AAA时才会有效。例如，在以下场景中，它可能无效。

<p class="data">AAA BBB</p>
<p class="data">AAA</p>
<p class="data">CCC</p>
<p class="data">DDD</p>

Answer 3

我建议：

// Select all '.data' elements, and filter that collection
// Using jQuery's filter() method:
$(".data").filter(

  // using an arrow function to retain only those
  // elements whose trimmed text-content is
  // equal to "AAA":
  (index, element) => $(element).text().trim() === "AAA"

// using the css() methods to set the color property to
// To 'red':
).css('color', 'red');

Answer 4

使用filter()

＆＃13;

＆＃13;

$(".data").filter(function(i, el){
  return $(el).text() === "AAA"; 
}).css({color: "red"});

＆＃13;

<p class="data">AAA</p>
<p class="data">BBB</p>
<p class="data">CCC</p>
<p class="data">DDD</p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

使用.text()

＆＃13;

＆＃13;

$(".data").text(function(i, txt){
  if(txt==="AAA") $(this).css({color: "red"});
});

＆＃13;

<p class="data">AAA</p>
<p class="data">BBB</p>
<p class="data">CCC</p>
<p class="data">DDD</p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 5

p标签没有任何值，它有文本，$(this)应该用于应用jquery函数，只有this不起作用。

$(".data").each(function() {
    if ($(this).text() == "AAA") {
        $(this).css("color", "red");
    }
});

Answer 6

使用$(this)代替this

$(".data").each(function() { 
  if ($(this).html() == "AAA") { 
    $(this).css("color", "red"); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p class="data">AAA</p>
<p class="data">BBB</p>
<p class="data">CCC</p>
<p class="data">DDD</p>