Using jQuery's .add method

Question

Either I am making a very silly mistake here, or there is a bug with jQuery's .add method. Most likely the former.

I am trying to implement a list of items that could be selected. Here's my code on jsfiddle.

The test case that is failing is the following:

Click the first element to select it.
Ctrl-click the second element to select it too.
Then click the third element (without Ctrl).

Now, I'd expect the first and second to be de-selected, I believe the implementation also does this. But the second one does not get de-selected.

Digging a little, it seems that the .add is actually not adding my elements to the jQuery object set and for the life of me, I can't figure out why.

Any suggestions on this? Or is this not the way the .add method is supposed to be used?

Edit: I know jquery-ui has a control for this kind of thing, but I have already evaluated it and it does not work for me. Thanks.

i think you should do prevSelections.each(...) to remove classes — venimus
– venimus, Commented Jun 19, 2011 at 13:02
@venimus there is no need to use .each() for that prevSelections.removeClass('foo') would suffice. — Matt Ball
– Matt Ball, Commented Jun 19, 2011 at 13:04
@venimus, Actually, jQuery methods act on all selected elements in its object set, so .each isn't necessary — sharat87
– sharat87, Commented Jun 19, 2011 at 13:04
it was just a first thought, but +1 for the simple implementation — venimus
– venimus, Commented Jun 19, 2011 at 13:09

Matt Ball · Accepted Answer · 2011-06-19 13:08:37Z

3

.add returns a new jQuery object, so you need to grab the value returned.

prevSelections = prevSelections.add(...);

Here's some other cleanup applied:

var ps = $(),
    clazz = 'selected';
$('#list').delegate('li', 'click', function(e) {
    if (e.ctrlKey) {
        ps = ps.add($(this).toggleClass(clazz));
    } else {
        if (ps.length) {
            ps.removeClass(clazz);
        }
        ps = $(this).addClass(clazz);
    }
});

Demo: http://jsfiddle.net/mattball/mAPQA/

edited Jun 19, 2011 at 13:08

answered Jun 19, 2011 at 12:59

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sharat87 Over a year ago

what do you mean, do you get an error? I don't have a mac, could you give more info?

Matt Ball Over a year ago

Of course - my apologies. On Macs, ctrl-click is the same thing as right-click. So, instead of ctrl-click selecting additional items in the list, it just shows the context menu.

sharat87 Over a year ago

Oh! That's a very important piece of information for non-mac web devs like me. Thanks a ton for sharing. I'll research deeper :)

phihag · Accepted Answer · 2011-06-19 13:02:02Z

1

add constructs a new jQuery node set object.

Instead of

prevSelections.add($(this).toggleClass('selected');

do

prevSelections = prevSelections.add($(this).toggleClass('selected');

answered Jun 19, 2011 at 13:02

phihag

289k75 gold badges475 silver badges489 bronze badges

Collectives™ on Stack Overflow

Using jQuery's .add method

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related