Skip recursion in jQuery.find() for a selector?

Question

TL;DR: How do I get an action like find(), but block traversal (not full stop, just skip) for a certain selector?

ANSWERS: $(Any).fin

Answer 1

From my understanding, I would bind to the .controls elements and allow the event to bubble up to them. From that, you can get the closest .Interface to get the parent, if needed. This way you are added multiple handlers to the same elements as you go further down the rabbit hole.

While I saw you mention it, I never saw it implemented.

//Attach the event to the controls to minimize amount of binded events
$('.controls').on('click mouseenter mouseleave', function (event) { 
    var target = $(event.target),
        targetInterface = target.closest('.Interface'),
        role = target.data('role');

    if (event.type == 'click') {
        if (role) {
            switch (role) {
                case 'ReplyButton':
                    console.log('Reply clicked');
                    break;
                case 'VoteUp':
                    console.log('Up vote clicked');
                    break;
                case 'VoteDown':
                    console.log('Down vote clicked');
                    break;
                default:
                    break;
            }
        }
    }
});

Here is a fiddle showing what I mean. I did remove your js in favor of a simplified display.

It does seem that my solution may be a over simplification though...

---

Update 2

So here is a fiddle that defines some common functions that will help achieve what you are looking for...I think. The getInterfaces provides a simplified function to find the interfaces and their controls, assuming all interfaces always have controls.

There are probably fringe cases that will creep up though. I also feel I need to apologize if you have already ventured down this path and I'm just not seeing/understanding!

---

Update 3

Ok, ok. I think I understand what you want. You want to get the unique interfaces and have a collection of controls that belong to it, that make sense now.

Using this fiddle as the example, we select both the .Interface and the .Interface .controls.

var interfacesAndControls = $('.Interface, .Interface .controls');

This way we have a neat collection of the interfaces and the controls that belong to them in order they appear in the DOM. With this we can loop through the collection and check to see if the current element has the .Interface associated with it. We can also keep a reference to the current interface object we create for it so we can add the controls later.

if (el.hasClass('Interface')){
    currentInterface = new app.Interface(el, [], eventCallback);
    
    interfaces.push(currentInterface);
    
    //We don't need to do anything further with the interface
    return;
};

Now when we don't have the .Interface class associate with the element, we got controls. So let's first modify our Interface object to support adding controls and binding events to the controls as they are being added to the collection.

//The init function was removed and the call to it
self.addControls = function(el){
    //Use the mouseover and mouseout events so event bubbling occurs
    el.on('click mouseover mouseout', self.eventCallback)
    self.controls.push(el);
}

Now all we have to do is add the control to the current interfaces controls.

currentInterface.addControls(el);

After all that, you should get an array of 3 objects (interfaces), that have an array of 2 controls each.

Hopefully, THAT has everything you are looking for!