jQuery Basics Part 3

To continue this series, we shall list the ways you can filter your select elements:

Basic Filters

$("p:first").css("border", "3px solid red");
$("p:last").css("border", "3px solid red");
$("p:even").css("border", "3px solid red");
$("p:odd").css("border", "3px solid red");
$(".a:first").css("border", "3px solid red");
$(".b:even").css("border", "3px solid red");
$("p:gt(1)").css("border","3px solid red");
$("p:not(p:eq(2))").css("border", "3px solid red");

Attribute Filters

$("p[class]").css("border", "3px solid red");
$("p[id=para1]").css("border", "3px solid red");
$("p[id^=para]").css("border", "3px solid red");
$("p[id^=para][lang*=en-]").css("border", "3px solid red");

Child, Visibility and Content Filters

	
$("p:contains(3)").css("border", "3px solid red");
$("p:parent").css("border", "3px solid red");
$("ul:has(li[class=a])").css("border", "3px solid red");
$("ul li:nth-child(3)").css("border", "3px solid red");
$("ul li:nth-child(2n)").css("border", "3px solid red");

Published by

Mark Taylor

Web developer, based in Bourne, Lincolnshire, UK. builder of web applications, ASP.NET, Web Standards HTML, CSS & JavaScript. SQL Server & MySQL DB developer.

Leave a Reply

Your email address will not be published. Required fields are marked *