jquery - 将方法添加到单个 jQuery 节点上

Question

假设我有两个这样的 html 节点:

<div class='node a'>one</div>
<input class='node b' value='two'>

我想为 $('.node.a') 添加一个方法，但不为节点 b 添加一个方法。我真正想做的是这样的:

$('.node.a').addMethod('val', function() {
  return $('.node.b').val();
});

alert($('.node.a').val()); // alerts 'two'

显然我不想覆盖每个 jQuery 节点的“val”方法。可以这样做吗？

* 更新 *

根据 mgibsonbr 的建议，我编写了一个 jQuery 插件来为我做到这一点。我不使用 jQuery 数据方法，而是仅在有问题的节点是被调用的节点时才运行不同的功能。这意味着这种形式不适用于匹配多个 html 节点的 jquery 列表。这是:

// overrides a method thats supposed to be called on a single node (a method like val)
$.fn.overrideNodeMethod = function(methodName, action) {
    var originalVal = $.fn[methodName];
    var thisNode = this;
    $.fn[methodName] = function() {
        if (this[0]==thisNode[0]) {
            return action.apply(this, arguments);
        } else {
            return originalVal.apply(this, arguments);
        }
    };
};

Answer 1

我知道添加节点特定数据的唯一方法是使用 data 方法:

$('.node.a').data("val", function() {
    return $('.node.b').val();
});

alert($('.node.a').data("val")());

不是您想要的语法，但可以完成工作。另一种选择是重载 val，正如 alex 建议的那样。例如，您可以结合使用这两种方法:

var oldVal = $.fn.val;
$.fn.val = function() {
    var custom = $(this).data("val");
    return custom ? custom.apply(this,arguments) : oldVal.apply(this,arguments);
};

alert($('.node.a').val()); // Now it works as intended

这样，val 对于大多数项目都可以正常工作，只是在手动添加方法的项目上表现有所不同。