jQuery loop through same classname

Question

I have a few elements with the same class name data for example, they could look like this:

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

Now I want to loop through all the elements with class name data and see if any of them match a string, say AAA. If it does, then make that element red color.

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

However, this isn't working. Any ideas?

WizardCoder · Accepted Answer · 2017-06-09 17:50:14Z

2

this should be $(this) and val() should be html(). val() is used for elements with a value attribute like input fields and radio buttons ect. html() gets the html inside an element. this is the vanilla Javascripts version of jQuerys $(this).

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

answered Jun 9, 2017 at 17:50

WizardCoder

3,48111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hari Das · Accepted Answer · 2017-06-09 17:56:53Z

2

No need to loop through the class name to achieve that result. You can simply write

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

Note: This will only work if you are sure enough that other tags won't contain AAA. For example in following scenario it may not work.

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

answered Jun 9, 2017 at 17:56

Hari Das

11k8 gold badges69 silver badges67 bronze badges

1 Comment

Roko C. Buljan Over a year ago

"it may not work" is unclear. Rather say that the element having AAA BBB will be targeted - since it actually contains "...AAA..."

David Thomas · Accepted Answer · 2017-06-09 17:52:37Z

1

I'd suggest:

// 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');

answered Jun 9, 2017 at 17:52

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

Steve0 Over a year ago

I can't believe I haven't heard of or used an arrow function before. Thanks for prompting me to look up this syntax!

Roko C. Buljan · Accepted Answer · 2017-06-09 18:15:12Z

1

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

Using `.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>

edited Jun 9, 2017 at 18:15

answered Jun 9, 2017 at 18:05

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

tech2017 · Accepted Answer · 2017-06-09 17:49:57Z

0

p tag does not have any value, it has text and $(this) should be used to apply jquery functions, only this will not work.

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

edited Jun 9, 2017 at 17:49

answered Jun 9, 2017 at 17:47

tech2017

1,8061 gold badge13 silver badges15 bronze badges

Comments

Mohideen bin Mohammed · Accepted Answer · 2017-06-09 17:55:01Z

0

use $(this) instead 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>

answered Jun 9, 2017 at 17:55

Mohideen bin Mohammed

20.4k11 gold badges121 silver badges131 bronze badges

Collectives™ on Stack Overflow

jQuery loop through same classname

6 Answers 6

Comments

1 Comment

1 Comment

Using `filter()`

Using `.text()`

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Using filter()

Using .text()

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using `filter()`

Using `.text()`