Как найти имя класса через текст, используя 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;
});

У меня есть файл iframe, в котором я собираюсь найти имя класса с помощью текста, здесь текст означает heading. Например, от <p class="block_7">Hello World</p> до Hello World мне нужно штрафовать класс, т.е. block_7. Как я могу это сделать?

Answer 1

Вы можете перебрать Iframe Contents и проверить 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>

Answer 2

Вы должны использовать :contains():

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

Answer 3

Используйте псевдо-селектор :contains:

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>

Если найдены какие-либо элементы <p>, содержащие этот текст, они будут помещены в коллекцию match, а затем вы можете посмотреть на className из <p>.