Solved

jQuery: Make third link green

Posted on 2010-09-20
4
206 Views
Last Modified: 2012-06-27
This code makes all my links green.  I only want the third link to be green.
<p id="myp"> 
   <a href="#i1">Link 1</a> 
   <a href="#i2">Link 2</a> 
   <a href="#i3">Link 3</a> 
   <a href="#i4">Link 4</a> 
  </p>

<script type="text/javascript">
  $("#myp a").css("color", "#11ff11");
</script>

Open in new window

0
Comment
Question by:hankknight
  • 2
4 Comments
 
LVL 4

Expert Comment

by:rstjean
ID: 33721116
<p id="myp">
   <a href="#i1" class=l1>Link 1</a>
   <a href="#i2" class=l1>Link 2</a>
   <a href="#i3" class=l2>Link 3</a>
   <a href="#i4" class=l1>Link 4</a>
  </p>

<script type="text/javascript">
  $("#myp l1").css("color", "#11ff11");
</script>

I don't have my script up and running but form off the top of my head, this should work.  Make sure to declare the classes in the .css file
0
 
LVL 1

Expert Comment

by:0rik
ID: 33721193
This will make only your third link green.
<p id="myp"> 
   <a href="#i1">Link 1</a> 
   <a href="#i2">Link 2</a> 
   <a href="#i3">Link 3</a> 
   <a href="#i4">Link 4</a> 
  </p>

<script type="text/javascript">
  $("#i3").css("color", "#11ff11");
</script>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33721271
Use : http://api.jquery.com/eq-selector/

So : $("#myp a:eq(2)").css("color", "#11ff11");

test page :


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<p id="myp"> 
   <a href="#i1">Link 1</a> 
   <a href="#i2">Link 2</a> 
   <a href="#i3">Link 3</a> 
   <a href="#i4">Link 4</a> 
  </p>
<script type="text/javascript">
  $("#myp a:eq(2)").css("color", "#11ff11");
</script>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33721308
Thanks for the points!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question