PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Exclude $(this) from Selector

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.

Subscribe to The Thread

  1. Ant

    Better application for this:

    var allLinks = $("a");

allLinks.click(function() {
	allLinks
		.removeClass('red')
		.not(this)
		.addClass('red');
});
    Reply ↓
  2. Tem Corner

    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.

    jQuery(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){
		e.preventDefault();

		$( '.clicked' ).removeClass( 'clicked' );
		$( this ).addClass('clicked');
		if ( !bodyIsClassed ) {
			$( 'body' ).addClass( 'highlight-anchors' );
		}
	});
});

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~