jQuery find using function as argument

Question

I have always missed a traverse function in jQuery, and I thinking that there might be one but I missed it. Say we have the following markup:

<ul>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
    <li><a href="#">John</a></li>
    <li><a href="#">Doe</a></li>
</ul>

Now, if I want to add an active class to the anchor I clicked and deactivate the others, I would normally have to do this:

$('a').click(function() {
    $(this).addClass('active')
        .parent()
        .siblings()
        .find('a.active')
        .removeClass('active');
});

But what I want is to do is this:

var relation = function() {
    return $(this).parent().siblings().find('a.active');
};

$('a').click(function() {
    $(this).addClass('active').find(relation).removeClass('active');
});

See the difference? Now, find doesn’t take a function as argument, so I wrote something like this:

$.fn.traverse = function(fn) {
    return $.isFunction(fn) ? fn.call(this) : this;
};

As an example, this simple method makes it possible to create an "activate" plugin that lets the author specify the relationship to the deactivations:

$.fn.activate = function(fn) {
    return this.each(function() {
        $(this).addClass('active').traverse(fn || function() {
            return $(this).siblings();
        }).removeClass('active');
    });
});

And use it like this:

$('a').activate(function() {
    return $(this).parent().siblings().find('.active');
});

// or

$('a').activate(function() {
    return $(this).closest('ul').find('a.active').not(this);
});

// or

$('li').activate();

This will do the job. But my question is that there really should be something like this included in jQuery somewhere, no? I was looking at .map but it doesn’t work that way.

I edited with an implementation example. The idea is to be able to traverse through an anonymous function instead of just selectors or traverse methods. — David Hellsing
– David Hellsing, Commented Sep 27, 2012 at 14:49
This seems like a solution in search of a problem. The way you describe as the normal way looks much clearer to me than your new way, especially if you have a well-structured DOM. — lonesomeday
– lonesomeday, Commented Sep 27, 2012 at 14:59

Jason Orendorff · Accepted Answer · 2012-09-27 15:05:46Z

1

The usual pattern in jQuery is:

find the elements you want to change, then
call a method to do something to them.

There are many other ways you could do things, but this way works fine and it is the way the library is designed to work. I would need a compelling reason to depart from that. (Not just “But I want to do it this way.”)

I would write it like this:

$('a').click(function() {
    $(this).closest('ul').find('a.active').removeClass('active');
    $(this).addClass('active');
});

Chaining is overrated. If you want to do two things, try writing two lines of code. You might like it!

edited Sep 27, 2012 at 15:05

answered Sep 27, 2012 at 14:55

Jason Orendorff

45.4k6 gold badges69 silver badges103 bronze badges

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

5 Comments

David Hellsing Over a year ago

There are a lot of traverse methods, such as .parent(), and most of them can take a selector for further filtering. But no traverse method takes a function, even though they added functions as arguments for many other things, such as .css(). That was my point.

David Hellsing Over a year ago

I agree, and I’m starting to think that I failed to provide a clear purpose with my question...

Jason Orendorff Over a year ago

@David I see what you mean. But I still think that’s just because it wouldn’t be useful to take a function there. Any time you write $(x).traverse(function () { return $(this).PIPELINE(); }); it would be shorter and clearer to just write $(x).PIPELINE().

David Hellsing Over a year ago

How about $(this).traverse(function() { return hasChildren ? $(this).children() : $(this).parents() ).addClass('foo'); VS if (hasChildren) { $(this).children().addClass('foo'); } else { $(this).parents().addClass('foo')}? It would follow the "usual pattern" you describe.

Jason Orendorff Over a year ago

@David That seems a little contrived, but in that case you’d write (hasChildren ? $(this).children() : $(this).parents()).addClass('foo'); or better still, use two lines of code: var targets = hasChildren ? $(this).children() : $(this).parents(); targets.addClass('foo');

Collectives™ on Stack Overflow

jQuery find using function as argument

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related