Exclude $(this) from Selector

Let's say you want to attach a click handler to every link on a page. The function for that click handler turns all the other links a different color.

var $allLinks = $("a");

$allLinks.click(function() {

     $allLinks.not(this).css("color", "red");


You can use the .not() function to remove elements from a set, so padding this to that function will remove the current element before the color change.


  1. Ant

    Better application for this:

    var allLinks = $("a");
    allLinks.click(function() {
  2. Tem Corner
    Permalink to comment#

    Since having a lot of links on a page with this script means that jQuery will manipulate each of the elements and do stuff in the class-attributte, this can become quite expensive and slow.

    A better way would be to use a common wrapper class.
    That way jQuery only touches the current link and the previously clicked ones. Way faster and cheaper on larger pages and good practice in general.

    The body-class part is not mandatory, the links could be made red by default leaving only two css rules. and two lines of javascript within the click function.

    	// Only do the body class once
    	var bodyIsClassed = false;
    	// Instead of binding handlers to all anchor-tags, watch live()
    	$( 'a' ).live( 'click', function(e){
    		$( '.clicked' ).removeClass( 'clicked' );
    		$( this ).addClass('clicked');
    		if ( !bodyIsClassed ) {
    			$( 'body' ).addClass( 'highlight-anchors' );

    See also http://krinkle-tools.grizzdesign.nl/other-anchors.html

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.