[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 391
  • Last Modified:

jQuery: Element where child link text is match

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

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Should do the trick : $("li a:contains('Quack'):first").last().css('background','red');
<!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 a:contains('Quack'):first").last().css('background','red');
//$('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

0
 
hankknightAuthor 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

0
 
leakim971PluritechnicianCommented:
OK, nice, thanks for the points!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now