Question

0

53

Views

how to find specefique html element by keyword?

im having problems on how to find a specifique html element when having a keyword:

...

<div class="col-sm-6 col-md-6 col-lg-4">
    <div class="ct-itemProducts ct-u-marginBottom20" >
                                    <div class="ct-main-content">
                                    
                                        <div class="ct-main-text" >
                                            
                                            <div class="ct-product--tilte">
                                                COMPUTIME
                                            </div>
                                            ...

my keyword is COMPUTIME aand i whant to detect className of this div

<div class="col-sm-6 col-md-6 col-lg-4">

7 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T01:32:28.475Z

You can try this with JavaScript:

for (const a of document.querySelectorAll(".ct-product--tilte")) {
  if (a.textContent.includes("COMPUTIME")) {
  console.log(a.textContent)
  }
}

Answer 2 · 2022-06-30T01:32:28.484Z

EDIT : As i understand, you want to get element class by searching on the TEXT in your div, then you can try something like this :

var allElement = document.querySelectorAll('*');
var myElement = null;

var valueToSearch = "COMPUTIME"; 

allElement.forEach(el => {
  if(el.innerHTML.trim() === valueToSearch) {
    myElement = el;
  }
})

console.log(myElement) // My element HTML
console.log(myElement.className) // My Class 
console.log(myElement.id) // My id

var parentSearching = true;

while(parentSearching) {
  myElement = myElement.parentElement;
  if (myElement.className.includes('col')) {
    parentSearching = true;
    break;
  }
}

console.log(myElement.className); // col-sm-6 col-md-6 col-lg-4

<div class="col-sm-6 col-md-6 col-lg-4">
  <div class="ct-itemProducts ct-u-marginBottom20" >
    <div class="ct-main-content">
      <div class="ct-main-text" >
        <div class="ct-product--tilte">
          COMPUTIME
        </div>        
      </div>
    </div>
  </div>
</div>

Answer 3 · 2022-06-30T01:32:28.492Z

I did not understand your question but if you want to detect/access any class in CSS then use "." before the class name like ".col-sm-6 col-md-6 col-lg-4" and for id use "#" like "#col-sm-6 col-md-6 col-lg-4"