jquery выберите класс внутри тега <i>курсива, который находится внутри тега привязки <a>

Question

Я должен выбрать все теги привязки на странице, текст которых обернут в тег i, который имеет класс pdf.

<a href="somewebsite.com"><i class="pdf"> </i>this is the text</a>

У меня есть это, и оно кажется неправильным:

$( "a>i" ).each (function() {
  $(this).find(".pdf");
  alert("This is a PDF icon in an <i> tag");
});

Кажется, предупреждение срабатывает в два раза чаще или что-то в этом роде.

Пожалуйста, помогите. Заранее спасибо!

Answer 1

Это можно сделать с помощью селектора jQuery :has :

$("a:has(i.pdf)")

В зависимости от цели, вам может не потребоваться вообще использовать .each() , Например, если вы хотите, чтобы эти ссылки были красными ...

$("a:has(i.pdf)").css("color", "red");

a{display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="somewebsite.com"><i class="pdf"></i>this has &lt;i class="pdf"&gt;</a>
<a href="somewebsite.com"><i class="pdf"></i>this has &lt;i class="pdf"&gt;</a>
<a href="somewebsite.com">this does not have &lt;i class="pdf"&gt;</a>
<a href="somewebsite.com"><i class="pdf"></i>this has &lt;i class="pdf"&gt;</a>

Answer 2

Или проверьте, есть ли у <i> класс, внеся небольшую корректировку в ваш скрипт:

$("a>i").each(function() {
    if($(this).hasClass("pdf") {
        alert("This is a PDF icon in an <i> tag");
    }
});