Question

我总是错过了jQuery中的遍历函数，我认为可能有一个但我错过了它。假设我们有以下标记：

<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>

现在，如果我想在锚点中添加一个活动类，我点击并停用其他类，我通常必须这样做：

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

但我想要的是这样做：

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

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

看到区别？现在，find没有将函数作为参数，所以我写了这样的东西：

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

举个例子，这个简单的方法可以创建一个“激活”插件，让作者指定与去激活的关系：

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

并像这样使用它：

$('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();

这将完成这项工作。但我的问题是，在某个地方确实应该包含这样的东西，不是吗？我在看.map，但它不会那样。

Answer 1

jQuery中的常见模式是：

找到您要更改的元素，然后
调用方法对他们做某事。

还有许多其他方式可以做事，但这种方式运行正常，这是图书馆设计工作的方式。我需要一个令人信服的理由偏离它。（不只是“但我想这样做。”）

我会这样写：

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

链接被高估了。如果你想做两件事，试着写两行代码。你可能会喜欢它！

jQuery找到使用函数作为参数

1 个答案: