jQuery选择器，用于纯JavaScript对象，而不是DOM元素 [英] jquery selectors for plain javascript objects instead of DOM elements

问题描述

我刚刚开始使用jquery，我真的很喜欢使用选择器。它发生在我，成语将是一个很好的方式来遍历对象树（例如，JSON查询结果）。例如，如果我有这样的对象：

  var obj = {'foo'：1，'bar'：2 ，
'child'：{'baz'：[3，4，5]} 
}; 
  

我希望能够写出像$（'child baz：last'，obj）并得到5.我认识到链接不会工作，但我仍然喜欢选择运算符。

解决方案

这里是一个证明的方法，概念实现获取jQuery本身工作对象。通过一个对象包装器（ FakeNode ），你可以使用其内置的选择器引擎（Sizzle）来处理简单的JavaScript对象：

  function FakeNode（obj，name，parent）{
 this.obj = obj; 
 this.nodeName = name; 
 this.nodeType = name？ 1：9; //元素或文档
 this.parentNode = parent; 
} 
 
 FakeNode.prototype = {
 documentElement：{nodeName：fake}，
 
 getElementsByTagName：function（tagName）{
 var nodes = []; 
 
 for（var p in this.obj）{
 var node = new FakeNode（this.obj [p]，p，this）; 
 
 if（p === tagName）{
 nodes.push（node）; 
} 
 
 Array.prototype.push.apply（nodes，
 node.getElementsByTagName（tagName））; 
} 
 
返回节点; 
} 
}; 
 
 function $$（sel，context）{
 return $（sel，new FakeNode（context））; 
} 
  

其用法如下：

  var obj = {
 foo：1，
 bar：2，
 child：{
 baz：[3， 4，5]，
 bar：{
 bar：3 
} 
} 
}; 
 
 function test（selector）{
 document.write（Selector：+ selector +< br>）; 
 
 $$（selector，obj）.each（function（）{
 document.write（ -  Found：+ this.obj +&br>）; 
}）; 
} 
 
 test（child baz）; 
 test（bar）; 
  

提供输出：

 
选择器：child baz 
  - 找到：3,4,5 
选择器：bar 
  - 找到：2 
  - 找到：[object Object] 
  - 找到：3 
 

当然，你必须实现上面的内容以支持更复杂的选择器。 p>

BTW，您看过 jLinq 吗？

I've just started using jquery and I'm really enjoying using selectors. It occurs to me that the idiom would be a very nice way to traverse object trees (e.g., JSON query results). For example, if I have an object like this:

var obj = { 'foo': 1, 'bar': 2,
            'child': { 'baz': [3, 4, 5] }
          };

I would love to be able to write something like $('child baz:last', obj) and get 5. I recognize that chaining wouldn't work, but I'd still love the selection operator. Anyone know if such a beast exists, or what the easiest way would be to write one?

解决方案

Here's a proof-of-concept implementation for getting jQuery itself work on objects. Through an object wrapper (FakeNode), you can trick jQuery into using its built-in selector engine (Sizzle) on plain JavaScript objects:

function FakeNode(obj, name, parent) {
    this.obj = obj;
    this.nodeName = name;
    this.nodeType = name ? 1 : 9; // element or document
    this.parentNode = parent;
}

FakeNode.prototype = {
    documentElement: { nodeName: "fake" },

    getElementsByTagName: function (tagName) {
        var nodes = [];

        for (var p in this.obj) {
            var node = new FakeNode(this.obj[p], p, this);

            if (p === tagName) {
                nodes.push(node);
            }

            Array.prototype.push.apply(nodes,
                node.getElementsByTagName(tagName));
        }

        return nodes;
    }
};

function $$(sel, context) {
    return $(sel, new FakeNode(context));
}

And the usage would be:

var obj = {
    foo: 1,
    bar: 2,
    child: {
        baz: [ 3, 4, 5 ],
        bar: {
            bar: 3
        }
    }
};

function test(selector) {
    document.write("Selector: " + selector + "<br>");

    $$(selector, obj).each(function () {
        document.write("- Found: " + this.obj + "<br>");
    });
}

test("child baz");
test("bar");

Giving the output:

Selector: child baz
- Found: 3,4,5
Selector: bar
- Found: 2
- Found: [object Object]
- Found: 3

Of course, you'd have to implement a lot more than the above to support more complex selectors.

BTW, have you seen jLinq?

这篇关于jQuery选择器，用于纯JavaScript对象，而不是DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！