Javascript 使用对象作为过滤器的jquery

有没有办法让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'}

）。此方法将任何JavaScript对象或原语与DOM元素关联。实际上，jQuery并没有将数据作为expando添加到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'}

---

或者短路径：

varobj={a:$（'.box1'），b:$（'.box2'）


我认为这是不容易实现的。让我澄清一下：

要实现您想要的，您需要一个hashmap，它允许对象位于键的位置。不过JavaScript（还）不支持对象作为hashmaps中的键。因此，例如，以下情况不起作用：

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;

var key={value:'key'}；
变量数据{value:'data'}；
var-map={keys:[]，data:[]，get:function（key）{
var k=this.keys.indexOf（key）；
如果（k>=0）{
返回此.data[k]；
}否则返回未定义；
}，设置：功能（键，val）{
var k=this.keys.indexOf（key）；
if（k<0）{
k=此。键。按（k）-1；
}
此.data[k]=val；
} };
map.set（键、数据）；
map.get（key.value）；

然而，这种实现的性能非常糟糕。有人提议建立一种所谓的JavaScript和谐。不过，我相信Firefox是目前唯一实现这些功能的浏览器。由于所需的功能并不广泛可用，而且解决方法的性能较差，我建议尝试找出一种不同的方法来实现您正在尝试的功能。
据我所知，您正在寻找一些糖衣方法来在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'});

查看
上的实现如果我理解正确，我认为您需要定义一个属性，并将

可枚举说成false。见下文

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

---

参考：

使用三种方法扩展jQuery：

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

您的代码如下所示：

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

完整来源：

---

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

$.inArray

获取对象的索引，并使用该索引获取绑定的jQuery集合。

这不会回答问题question@tobyodavies：我正在寻找一种使用对象获取元素的方法，而不是在对象上保存元素。我想要的是类似于有一个选择器，它可以是一个对象。这个解决方案不正是这样吗？对象本身并不是真正的“保存”元素，而是包含两个引用DOM元素的jquery对象。如果要执行$（obj），则obj必须是带有jquery选择器的字符串。我猜“obj”对象的性质是什么？您可以随时重写对象的“toString”函数来打印选择器，我想。。。我还是不知道你想做什么。也许需要进行一点细化？@Kasapo：请参见问题编辑，我不需要将对象传递到主jQuery函数中，这是您所假设的。我想要一个实用函数之类的东西，它将根据与DOM对象匹配的元素检索某些元素。想象一下我在做类似于

var obj{}的事情$（'a'）.bindTo（obj）

我希望能够通过执行类似

$.retrieve（obj）的操作来获得
a
s

但我不希望它在过程中改变

obj

，您可以添加一个使用过滤器方法实现这一点的示例吗？我不知道你想做什么。你检查了我建议的答案了吗？@MohamedMelicy：是的，但再次说明，选择器中没有使用对象，而是使用与DOM元素关联的数据进行选择。我想我想知道为什么不能更改“obj”。对我来说，创建一个带有bindTo（）函数的“obj”原型似乎更有意义，该函数接受jQuery对象或CSS选择器。然后将任何数据存储在obj或obj.data中，并使用obj.bindTo（…）和$.retrieve（obj），其中retrieve检查引用DOM元素的“obj”的某些数据成员。如果您使用$（'a'）.bindTo（obj），那么您不需要另一个对象来关联绑定（因为'obj'

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

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

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