Js How to define element by value of itself

Question

I know maybe couldn't do that Ex:

 <div class="dv1">
      <span correct="sp1"> D </span>
      <span correct="sp2"> C </span>
      <span correct="sp3"> Z </span>
 </div>

I can define like this :

$(".dv1 span[correct=sp2]").addClass("active");

Other way I want like this :

$(".dv1 span[text=C]").addClass("active");

So maybe there are other ways do the same right ? Thanks !

Answer 1

Do it like this:

$('.dv1 span').filter(function(index) { return ($(this).text()).trim() === "D"? $(this) : false; });

var element = $('.dv1 span').filter(function(index) { return ($(this).text()).trim() === "D"? $(this) : false; });
element.addClass('active')

.active{
   color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dv1">
      <span correct="sp1"> D </span>
      <span correct="sp2"> C </span>
      <span correct="sp3"> Z </span>
 </div>

Answer 2

you can do this:

  $(".dv1 span").each(function(){
    if($(this).text().trim() == 'C'){
        $(this).addClass('active');
    }
  })

Answer 3

I'm not sure the second way works. Here there is another way:

$(".dv1").find('span[correct=sp2]').addClass("active");

here is working.