CODEWITHSUNDEEP
jqueryhtml
Chud37
Chud37

Reputation: 5017

Affecting all-but-one-element with jQuery's each()

A quick question about jQuery's each() function;

When I use each(), it's usually because I want to affect all the elements apart from just one. For instance:

$("a.aboutMenu").each(function () {
    $(this).css("color","#FFF");
});

$(this).css("color","#111");

Is there a shorthand way of writing this better? I realise I could put an if in the each function, but there must be someway of writing "each except $(this)"?

Upvotes: 2

Views: 2327

Answers (5)

user909694
user909694

Reputation:

As an alternative to the typical .each() method, in some cases using .siblings() works out better. Especially in cases where you want to target everything except one specific element.

For example:

$('a.aboutMenu').on('click', function() {
  // the initiating element..
  this.css('color','#ddd');

  // all anchor siblings..
  this.siblings('a').css('color','#fff');

  // the initiating element and all '.menu' siblings..
  this.css('color','#ddd').siblings('a.menu').css('color','#fff');
});

Naturally, this is a simple example that doesn't cater for elements that would not (or should not) be updated, but the key point is that you can work from a single entry point (a clicked element, the currently active element, etc..) and then make your modifications to all of it's siblings.

Perhaps a little bit out of the scope of this question, but this could even be extended using some creative selector naming. Keeping in mind that both $('.menu-about') and $('[class=|"menu"]') would match a class selector such as 'menu-about' (see this for details), you could create a single, small, easily reusable style update function that caters for virtually any menu layout.

Upvotes: 0

Michael Low
Michael Low

Reputation: 24506

You can do it by: 

$("a.aboutMenu").css("color","#FFF");
$(this).css("color","#111");

Upvotes: 1

Nelson Benítez León
Nelson Benítez León

Reputation: 50603

Well, you could do the following:

$("a.aboutMenu").not( $(this) ).each(function () {
     $(this).css("color","#FFF");
});
$(this).css("color","#111");

Upvotes: 2

Andrea Turri
Andrea Turri

Reputation: 6500

Is exactly the same thing if you see on the jQuery API.

In your example you are saying: for each a.aboutMenu to change the css color to be white.

You can also write:

$.each('a.aboutMenu', function() { $(this).css("color","#FFF");} });

If you need a control just add an if inside your function.

EDIT:

To remove just this element you can write:

$('.aboutMenu').not(this).css('color', '#FFF');

or better:

$('.aboutMenu').not(this).addClass('whiteColor');

Upvotes: 3

Matt
Matt

Reputation: 75327

In this circumstance you don't even need each, but in general you could exclude this from the selector using not(), and in the same step apply it's CSS:

$("a.aboutMenu").not($(this).css('color', '#111')).each(function() {
    $(this).css("color", "#FFF");
});​

This works because using css() as a setter returns the original jQuery object, which fits as a parameter to not() quite nicely.

Upvotes: 6

Related Questions