jQuery循环通过相同的类名答案

【问题标题】：jQuery loop through same classnamejQuery循环通过相同的类名
【发布时间】：2017-06-09 17:46:48
【问题描述】：

例如，我有一些具有相同类名 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");
    }
});

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

【问题讨论】：

标签： javascript jquery html css loops

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

"it may not work" 不清楚。而是说具有AAA BBB 的元素将成为目标 - 因为它实际上包含 "...AAA..."

【解决方案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');

【讨论】：

我不敢相信我以前没有听说过或使用过箭头功能。感谢您提示我查找此语法！

【解决方案4】：

使用`filter()`

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

<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>

使用`.text()`

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

<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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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>

【讨论】：

使用filter()

使用.text()

使用`filter()`

使用`.text()`