CODEWITHSUNDEEP
javascriptjquery
Avi
Avi

Reputation: 35

How to find class name via text using jquery?

$(".unitHeading").click(function(){
    urls = this.id;
    heading = $(this).data("id");
    rendition.display(urls);
    classname = $('iframe').contents().text(heading).find('class');
    console.log(classname);
    return false;
});

I have an iframe file where I am going to find the class name with the help of text here text means heading. For example <p class="block_7">Hello World</p> through Hello World I need to fine class i.e block_7. How can I do this?

Upvotes: 0

Views: 236

Answers (3)

Manikant Gautam
Manikant Gautam

Reputation: 3581

You can iterate over Iframe Contents and validate the text

let iframe = jQuery('iframe#frameId');
$(iframe[0].childNodes).each(function() {
     if($(this).text().includes('Hello World')){
       let el = $(this)[0].nodeValue;
       console.log($(el).attr('class'));
     }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<iframe id="frameId">
  <p class="block_7">Hello World</p>
</iframe>

Upvotes: 1

Jai
Jai

Reputation: 74738

You have to use :contains(): 

$('iframe').contents().find(`:contains('${heading}')`)[0].classList;

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370639

Use the :contains psuedo-selector:

const heading = 'Hello World';
const $iframe = $('<div><p class="block_7">Hello World</p></div>');
const match = $iframe.find(`p:contains('${heading}')`);
if (match.length) {
  console.log(match[0].className);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If any <p> elements containing that text are found, they'll be put into the match collection, and then you can look at the className of the <p>.

Upvotes: 0

Related Questions