Select li with innerHtml that equals "X" in JQuery

Question

If I have the following:

<ul>
  <li>Bob</li>
  <li>Chris</li>
  <li>Julie</li>
</ul>

Can I select just the li that has the `innerHtml' equal to "Chris"?

Something like

$('ul').child('li' html:'Chris'); // I dunno..

Answer 1

Use :contains() to select elements that contain the specified text.

$('ul li:contains(Chris)').css('color','red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Bob</li>
  <li>Chris</li>
  <li>Julie</li>
</ul>

---

For exact match use filter() method

$('ul li').filter(function() {
  return $(this).html() == 'Chris';
}).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Bob</li>
  <li>Chris</li>
  <li>Julie</li>
</ul>