How to find class name via text using jquery?

Question

$(".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?

So basically you are trying to find an element via its content? — flx
– flx, Commented Jan 17, 2020 at 6:43

Manikant Gautam · Accepted Answer · 2020-01-17 07:01:09Z

1

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>

edited Jan 17, 2020 at 7:01

answered Jan 17, 2020 at 6:39

Manikant Gautam

3,5911 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avi Over a year ago

I am trying @manikantgautam but nothing happen console error Uncaught TypeError: Cannot read property 'createDocumentFragment' of null

CertainPerformance · Accepted Answer · 2020-01-17 06:39:59Z

0

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>.

answered Jan 17, 2020 at 6:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

Avi Over a year ago

Actually I have only heading i.e Hello world and all <div><p class="block_7">Hello World</p></div> is a part of iframe. So, I need to find class name through only Hello World @CertainPerformance

CertainPerformance Over a year ago

What do you mean? From the iframe, all you need to do is .find(`p:contains('${heading}')`); - by concatenating the Hello World part with the :contains psuedo-selector, you can find the matching element (if there is one). All it's using is the Hello World and the iframe

Jai · Accepted Answer · 2020-01-17 06:41:59Z

0

You have to use :contains():

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

answered Jan 17, 2020 at 6:41

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

Jai Over a year ago

$('iframe').contents().find(:contains('${heading}')) what is it returns?

Avi Over a year ago

n.fn.init [prevObject: n.fn.init(1), context: document, selector: ":contains(Based on Structure)"]

Collectives™ on Stack Overflow

How to find class name via text using jquery?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related