How do I add objects to the jquery result object?

Question

I'm not sure if I'm doing something wrong here or not, but I need to base the status of several objects off of the status of another. So I'm basically iterating over the parents, then getting their children and iterating over them to get their children etc. However, I don't know how to add jquery objects on to a jquery result object.

My code looks something like this (where bubbleDown is said result object):

while (i < bubbleDown.length) {
    var curRow = bubbleDown[i];
    child = curRow.getAttribute('class') //etc
    parent = curRow.getAttribute('class') //etc
    bubbleDown.add($('.' + child + ':not(.' + parent.replace(' ', '.') + ')'));
    i++;
}

I've hidden some logic due to it not being applicable to my question. Anyway, it doesn't work, and not because the jquery fails to return objects. Can anyone help?

Answer 1

you have to do this on a jquery-object item:

var curRow = $(bubbleDown[i]);

or you can use the each() method: (while index holds the current item index)

bubbleDown.each(function(index){
    var child = $(this).attr('class')...
    ...
    bubbleDown.add(...);
});

use var to init your variables to avoid problems with IE for example.

Answer 2

The simplest approach is that .add() takes a selector already, just use that overload and keep updating the reference to the object to use the one .add() returns:

var newBubbleDown = $(bubbleDown);
while (i < bubbleDown.length) {
  var curRow = bubbleDown[i];
  child = curRow.getAttribute('class') //etc
  parent = curRow.getAttribute('class') //etc
  newBubbleDown = newBubbleDown.add('.' + child + ':not(.' + parent.replace(' ', '.') + ')');
  i++;
}
//use newBubbleDown

I can't simplify it any further since I'm not sure of your logic outside, e.g. where i comes from, what child and parent are used for, etc. But just call .add(selector), without feeding it a jQuery object and you're all set.

We're using a new object here since .add() returns a reference to a new jQuery object (one you're not using), so each .add() adds elements, creates a jQuery object containing them, then it's thrown away on the next loop. Instead you need to update the reference so it keeps accumulating elements like you want. I tend to change the .add() implementation to act on the current array in most of my projects because it's more useful that way which would make your original code work, for example).

Note: this will only add elements to the newBubbleDown jQuery object, but your :not() use makes me wonder if this will suit your needs, it wouldn't remove any elements in any case, it'll only find the elements matching that selector and add them to the array. If you need to exclude elements already in the array, you'll need .filter().