Selecting inner html in a JQuery selector

Question

I have the following html:

Click to copy

 <div id="ctl00_m_g_f660033c_e200_4bff_b244_b574efe5b9b5">
    <ul style="margin-left: 0px">
        <li id="li5"><a href="#">T, Paul</a> </li>
        <li id="li4"><a href="#">People**R, Jesse</a> </li>
        <li id="li1"><a href="#">Animals**El Guapo</a> </li>
        <li id="li2"><a href="#">Animals**Sasha</a> </li>
        <li id="li3"><a href="#">People**G, Jenice</a> </li>
    </ul>
</div>

I want to select only (li) elements that contain ** in the inner text. I can check for this in JQuery using the following code:

Click to copy

 if ($(this).html().indexOf('**') == -1)
   { return; }

However, I'd like to do this in the JQuery selector to avoid unnecessary parsing. I can use something like this to match on the id field:

Click to copy

$('ul li a[id*='**']')

.. but I wasn't able to find a way to match on the html() within the (a) element in the JQuery selector. Is it possible to do this?

Thanks in advance

Answer 1

You're looking for the :contains selector.

e.g.

Click to copy

$('ul li:contains(**)')