Detect word within an element that is within a specific class

Question

Detect word within an element that is within a specific class

Navigation

#1 by (0 votes)
#2 by (-1 votes)

1

I have the following code. I tried running inside the element with the class ACTIVE, a code that checked to see if it had the VIOLET word within the element with the class TITLE . But instead of executing only on the element with the class ACTIVE, it ran on all that were with the word VIOLET:

var Violet = /Violet/gi;

$('.title').append($('div').hasClass("active")).contents().each(function() {
  if (this.nodeType === 3 && this.nodeValue.match(Violet)) {
    alert('teste')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ulclass="owl-1">
  <div class="owl-item active">
    <li>
      <div class="title">Violet</div>
    </li>
  </div>
  <div class="owl-item">
    <li>
      <div class="title">Violet</div>
    </li>
  </div>
  <div class="owl-item">
    <li>
      <div class="title">Evergarden</div>
    </li>
  </div>
</ul>

javascript jquery

asked by anonymous 01.01.2019 / 16:09

2 answers

Spacing Error How to encrypt the password in a new user's registry and how do you recognize it in that user's login? [duplicate]

score 0 · Answer 1

Probably the following code might solve the problem:

var Violet = /Violet/gi;

if($("div.active .title").text().match(/Violet/gi)){
    alert('teste')
}

The selector $ ("div.active .title") searches for the element with the title class inside a div element with the active class. The result will be an array in case it finds a value or null / undefined if there is no element that matches that search.

score -1 · Answer 2

Thank you very much LeAndrade and Samuelf. With the help of you 2, I was able to make a code that meets my needs.

var violet = /Violet/gi;
 $('div.active').find('li').find('div.title').contents().each(function() {
  if(this.nodeType === 3 && this.nodeValue.match(violet)) {
  $('div.active').find('li').find('div.title').css('color','red');      
  } else{
    alert('Erro. O texto não é este!'); }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ulclass="owl-1">
  <div class="owl-item active">
    <li>
      <div class="title">Violet</div>
    </li>
  </div>
  <div class="owl-item">
    <li>
      <div class="title">Violet</div>
    </li>
  </div>
  <div class="owl-item">
    <li>
      <div class="title">Evergarden</div>
    </li>
  </div>
</ul>