jQuery使用对象作为过滤器

jquery using objects as filters

本文关键字：过滤器 对象 jQuery      更新时间：2023-09-26

有没有办法让 DOM 元素通过对象进行选择？

例如，我希望能够将对象与 DOM 元素相关联，如下所示：

var obj = { a: 1, b:2 };
$('a').click(function() { this.selectThing = obj });

后来...

$.something(obj);

甚至更好：

$('a|selectThing?=', obj);

类似的东西。您可以看到，我想将对象与 DOM 元素相关联，以便我可以将元素与对象一起抓取。

我知道这可以用filter()方法完成，我的问题是是否有一种更优雅的方法不使用filter()来做到这一点。

编辑：

澄清一下，我希望能够使用类似于选择器的对象，这样我就可以做类似这样的事情$(obj)显然是行不通的，但你明白了（我希望）

编辑#2：

我希望能够做这样的事情：

var obj = { prop: 'prop' };
$('a').bindTo(obj);
$.retreive(obj) // should equal $('a')

我不希望它以任何方式改变obj（obj仍然应该只{prop: 'prop'}）。

演示 

var $div1 = $('.box1');
var $div2 = $('.box2');
var obj = { a: $div1, b: $div2 };

obj.a.css({background:'red'});

或者短途：var obj = { a: $('.box1'), b: $('.box2') };

演示 jsBin 2

var obj = $('.box1, .box2'); // store objects
obj.css({background:'red'}); // access collection

您正在寻找$.data .此方法将任何 JavaScript 对象或原语与 DOM 元素相关联。在引擎盖下，它不会将数据作为扩展添加到 DOM 元素或任何东西中——相反，jQuery 维护自己的 DOM 元素和数据哈希的对象缓存。但那是在引擎盖下;关键是，我认为这正是你要找的。

$('#example').data('foo', { bar: 'quux' }); // returns the jquery object containing '#example', like most jQuery methods

然后，稍后：

console.log($('#example').data('foo')); // returns {bar: 'quux'}
我认为

这不容易实现。让我澄清一下：

要实现您想要的，您需要一个允许对象处于键位置的哈希图。JavaScript（尚）不支持对象作为哈希图中的键。因此，例如，以下内容不起作用：

var key = {value: 'key'};
var data {value: 'data'};
var map = {};
map[key] = data;

在当前的javascript实现中还有其他解决方案可以实现这一点，例如。 双重查找：

var key = {value: 'key'};
var data {value: 'data'};
var map = { keys: [], data: [], get: function (key) {
  var k = this.keys.indexOf(key);
  if (k >= 0) {
    return this.data[k];
  } else return undefined;
}, set: function (key, val) {
  var k = this.keys.indexOf(key);
  if (k < 0) {
    k = this.keys.push(k) - 1;
  }
  this.data[k] = val;
} };
map.set(key, data);
map.get(key).value;

然而，这种实现的性能很糟糕。有一个关于JavaScript Harmony中所谓的WeakMap的建议。不过，我相信Firefox是目前唯一实现它们的浏览器。由于所需的功能尚未广泛使用，并且解决方法的性能较差，因此我建议您尝试找出实现您尝试的不同方法。

使用三种方法扩展 jQuery：

jQuery.bindObj(data)
jQuery.unbindObj(data)
$.retrieve(data)

您的代码如下所示：

$('a').bindObj({blorg: 'shmorg'});
console.log($.retrieve({blorg: 'shmorg'})); // logs live result of $('a');

完整来源：http://jsfiddle.net/nUUSV/6/。

此解决方案的诀窍是将基于 jQuery 构造函数的选择器/标识符存储在一个数组中，将绑定到这些选择器/标识符的对象存储在另一个数组中，然后使用 $.inArray 在检索时获取对象的索引，并使用该索引获取绑定的 jQuery 集合。

据我了解，您正在寻找一些糖系方法来在 DOM 上运行多个命名搜索并在命名空间对象中过滤结果。

如果是这样，我想以下jquery扩展可能对您有所帮助：

$.fn.seek = function (selectors) {
  var container = this,
    found = {};
  $.each(selectors, function (name) {
    if ($.isPlainObject(selectors[name])) {
      found[name] = $(container).seek(selectors[name]);
    }
    else if ($.type(selectors[name]) === 'string') {
      found[name] = $(container).find(selectors[name]);
    }
  });
  return found;
}

以下是上述扩展如何适用于您的情况的示例：

var res = $('body').seek({
  links: 'a',
  headers: 'h1,h2,h3,h4,h5,h6'
});
$(res.links).css({ color: 'green' });
$(res.headers).css({ color: 'red' });

我希望这对你有所帮助。

不确定这是否是您要查找的。也许你可以基于 jquery 选择器编写一个自定义选择器，它以你喜欢的方式处理带有选择器属性的对象。可选对象如下所示

var objSelector = {'selector' : '#select-me', 'a' : 'somestring', 'b' : 1243};

因此，您可以像使用任何其他对象一样自由使用它，但必须添加选择器属性。比您添加自定义选择器：

$$ = (function($) {
    return function(el, tag) {
        if (typeof el === 'object' && el.selector !== undefined) {
            return $(el.selector);                  
        }
        return $(el);
    }
}($));

现在你可以做这样的事情

$$(objSelector).css({'border':'1px solid red'});

查看有关 http://jsfiddle.net/JXcnJ/的实现

如果我理解正确，我认为您需要定义一个属性并将enumerable说为 false。见下文，

注意：下面只是一个演示示例，并不完全是要做这些事情，

演示 

$(function() {
    $.fn.bindTo = function(o) {
        var _that = this;
        Object.defineProperty(o, 'myFx', {
            value: function() { return $(_that); },
            writable: true,
            enumerable: false,
            configurable: true
        });
    }
    $.retrieve = function(obj) {
        return obj.myFx();
    }
    var obj = {
        prop: 'prop'
    };
    $('#test').bindTo(obj);
    $($.retrieve(obj)).html('Test');
   //below is for proof
    for (i in obj) {
        alert(obj[i]);
    }
});

参考： http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

相关文章：