Adding class to elements based on their data attribute

Question

I am working on the following example. How I can use the data attribute data-st="" to filter adding class to element as below? For example I am trying to add the .red to ONLY element which have data-st="red"

    $("button").click(function(){
        $("p").each(function(){
            $(this).addClass('red');
        });
    });

.red{color:red;}

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

<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="black"> App </p>
<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="blue"> App </p>
<p class="" data-st="green"> App </p>

Sam Battat · Accepted Answer · 2018-05-25 18:56:26Z

Use [data-st=red]

$("#a1").click(function(){
        $("p[data-st!=red]").each(function(){
            $(this).addClass('red');
        });
    });
    
    $("#a1").click(function(){
        $("p[data-st!=red]").each(function(){
            $(this).addClass('red');
        });
    });

.red{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="a1">Apply 1</button>
<button id="a2">Apply 2</button>

<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="black"> App </p>
<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="blue"> App </p>
<p class="" data-st="green"> App </p>

EDIT To answer your question in the comment

Thanks sam this is perfect. but just one more question ? How about to add the class to all other attribute BUT NOT to red ones? – Mona Coder 3 mins ago

You can do that in a few ways:

Using the [data-st!=red]
Using the .not() method $('p').not('p[data-st=red]')

$("#a1").click(function() {
  $("p[data-st!=red]").each(function() {
    $(this).addClass('red');
  });
});
$("#a2").click(function() {
  $("p").not("p[data-st=red]").each(function() {
    $(this).addClass('red');
  });
});

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="a1">Apply 1</button>
<button id="a2">Apply 2</button>

<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="black"> App </p>
<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="blue"> App </p>
<p class="" data-st="green"> App </p>

Thanks sam this is perfect. but just one more question ? How about to add the class to all other attribute BUT NOT to red ones?

Gabriele Petrioli · Accepted Answer · 2018-05-25 18:39:48Z

You could use a more specific selector like p[data-st="red"]

Also, jquery methods (unless they return a value) will apply to all elements in the selection. So in your case you can skip the .each

$('p[data-st="red"]').addClass('red');

If your logic is more complicate and you want to do different things according to the value of the attribute you can use the .data to extract the value and act accordingly

$('p[data-st]').each(function(){
   var self = $(this),
       st = self.data('st');

   switch (st){
        case "red":
                  // do things here if data-st was red
                  self.addClass('red');
                  break;
        case "green":
                  // do things here if data-st was green
                  break;
        default:  
                  // do things here if data-st did not match any of the above cases 
   }   

});

jvk · Accepted Answer · 2018-05-25 18:51:18Z

0

You can solve this solution by using jquery filter method

  $(function(){
   $('button').click(function(){
    $('p').filter('[data-st="red"]').addClass('red');
   })
});

.red{
color:red;
}

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

<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="black"> App </p>
<p class="" data-st="green"> App </p>
<p class="" data-st="red"> App </p>
<p class="" data-st="blue"> App </p>
<p class="" data-st="green"> App </p>

answered May 25, 2018 at 18:51

jvk

2,1893 gold badges22 silver badges28 bronze badges

Collectives™ on Stack Overflow

Adding class to elements based on their data attribute

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related