We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

jQuery: Element where child link text is match

hankknight
hankknight asked
on
Medium Priority
399 Views
Last Modified: 2012-05-11
Using jQuery, I want to make the background red for the first <li> with a child link with the .html() text "Quack"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>

<h1>I want the background of the first &lt;li&gt; containing link text of "Quack" to be red</h1>


<ul id="dynoList1">
 <li>
  <a href="#" class="item">Foobar</a> 
  |
  <a href="#">12 Live</a> 
  |
  <a href="#">5 in process</a>
  |
  <a href="#">2 inactive</a>
 </li>
 <li>
  <a href="#" class="item">Zooph</a> 
  |
  <a href="#">32 Live</a> 
  |
  <a href="#">12 in process</a>
  |
  <a href="#">0 inactive</a>
 </li>
 <li>
  <a href="#" class="item">Quack</a> 
  |
  <a href="#">11 Live</a> 
  |
  <a href="#">72 in process</a>
  |
  <a href="#">4 inactive</a>
 </li>
</ul>

<script type="text/javascript">
/*<![CDATA[*/

$('li').last().css('background','red');
alert('The line above is cheating. I want to find the first li tag with link text of Quack');

/*]]>*/
</script>

</body>
</html>

Open in new window

Comment
Watch Question

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks, leakim971.

Actually, I want the entire <li> to have the red background, not just the link.  

I added .parent() to you code and it works.


$("li a:contains('Quack'):first").last().parent().css('background','red');

Open in new window

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
OK, nice, thanks for the points!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.