jquery filter: get the first match only?

Question

I want to find a match in the link's url and then do something about that link, such as changing it colour, etc.

$("a").filter("[href*='id=10']").css({color: 'red'});

html,

<a href="http://website.come/folder/file.php?id=9&ajax=true">0</a>
<a href="http://website.come/folder/file.php?id=10&ajax=true">1</a>
<a href="http://website.come/folder/file.php?id=20&ajax=true">2</a>
<a href="http://website.come/folder/file.php?id=30&ajax=true">3</a>
<a href="http://website.come/folder/file.php?id=10&ajax=true">11</a>

But I have two matches in the links list and I just want the first match. What should I add to the jquery code?

jsfiddle

Ahmednagar

Answer 1

Try this :

$("a").filter("[href*='id=10']").first().css({color: 'red'});

And if you want, you can also do that :

$("a[href*='id=10']").first().css({color: 'red'});

Voe

Won't this get every single result and then return the first? Probably bad performance if you have a million things, but not a big deal with two. – Reposition

Answer 2

Try this

 $("a").filter("[href*='id=10']:first").css({color: 'red'});

Demo

Franciscafranciscan

Answer 3

Use the psuedo class first:

$("a").filter("[href*='id=10']:first").css({color: 'red'});

Peag

Answer 4

$("a").filter("[href*='id=10']:eq(0)").css({color: 'red'});

0 can be every int of course.

http://jsfiddle.net/ygFDM/

Adel