Question

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

Answer 1

demo

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


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

<小时/> 或者简短的方法：var obj = { a: $('.box1'), b: $('.box2') };

demo jsBin 2

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

Answer 2

您正在寻找$.data。此方法将任何JavaScript对象或基元与DOM元素相关联。在引擎盖下，它不是将数据作为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'}

Answer 3

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

要实现您想要的功能，您需要一个允许对象位于键位置的哈希映射。 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和谐中提出了一个所谓的WeakMap提案。 Firefox我相信它是目前唯一实现它们的浏览器。由于所需功能无法广泛使用且变通方法性能不佳，我建议您尝试找出实现目标的不同方法。

Answer 4

据我了解，您正在寻找一些方法来在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' });

我希望这会对你有所帮助。

Answer 5

不确定这是否是您要找的。也许你可以编写一个基于jquery选择器的自定义选择器，它以你喜欢的方式处理具有selector-property的对象。可选对象看起来像

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/

上的实施

Answer 6

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

注意：以下只是一个示例，而不是完全意图做这些事情，

DEMO

$(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/

Answer 7

使用三种方法扩展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集合。

jquery使用对象作为过滤器

7 个答案:

demo

demo jsBin 2