डीओएम तत्वों के बजाय सादे जावास्क्रिप्ट ऑब्जेक्ट्स के लिए jquery चयनकर्ता

Question

मैंने अभी jquery का उपयोग करना शुरू कर दिया है और मैं वास्तव में चयनकर्ताओं का उपयोग कर आनंद ले रहा हूं। यह मेरे लिए होता है कि मुहावरे ऑब्जेक्ट पेड़ों को पार करने का एक बहुत अच्छा तरीका होगा (उदाहरण के लिए, JSON क्वेरी परिणाम)। उदाहरण के लिए, अगर मैं इस तरह एक वस्तु है:

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

मैं $ की तरह कुछ लिखने के लिए सक्षम होने के लिए प्यार होता है ('बच्चे baz: पिछले', obj) और 5. मैं स्वीकार करते हैं कि चेनिंग हैं नहीं मिल काम, लेकिन मैं अभी भी चयन ऑपरेटर से प्यार करता हूँ। किसी को पता है कि क्या ऐसा जानवर मौजूद है, या एक लिखने का सबसे आसान तरीका क्या होगा?

last = obj.child.baz.slice(-1)[0]; 

कुछ अन्य उदाहरण:

Answer 1

यहां jQuery को ऑब्जेक्ट्स पर काम करने के लिए सबूत-ऑफ-अवधारणा कार्यान्वयन है। एक वस्तु आवरण (FakeNode) के माध्यम से, आप का उपयोग कर में jQuery चाल कर सकते हैं अपने में निर्मित सादे जावास्क्रिप्ट वस्तुओं पर चयनकर्ता इंजन (छन्न):

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)); 
} 

और उपयोग होगा:

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"); 

देते उत्पादन:

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

बेशक

, आप और अधिक जटिल चयनकर्ताओं का समर्थन करने के ऊपर तुलना में बहुत अधिक लागू करने के लिए होगा।

बीटीडब्ल्यू, क्या आपने jLinq देखा है?

Answer 2

सरणी वस्तु कुछ तरीकों है कि आप उपयोग कर सकते हैं

first = obj.child.baz.slice(0,1)[0]; 
allExceptFirst = obj.child.baz.slice(1); 
allExceptLast = obj.child.baz.(0,-1); 

Answer 3

ठीक है, मैं व्यक्तिगत रूप से कहेंगे कि शुद्ध वस्तु पहुँच jQuery की तरह की तुलना में बेहतर लग रहा है प्रश्नों। एक चीज जो साफ होगी, टुकड़ा और अन्य फ़िल्टरिंग तकनीक होगी।

तुम सच में वस्तु का उपयोग प्रश्नों के साथ खेलना चाहते थे, तो निम्नलिखित कुछ संभावनाएं (लगता है XPath) होगा:

var obj = { 
    foo: 1, 
    bar: 2, 
    child: { 
     foo: { 
      baz: [3, {a: 1}, {a: 2, b: 3}]}, 
     bar: { 
      baz: [42, {a: 123}, {a: -1}]}, 
     baz: null}}; 

// Implicitly start in the Global object, unless a context is provided. 
// Keys in JavaScript objects are essentially stored in order (not valid for 
// *all* flavors, but it's close to standard. So you could do slicing on keys.) 

// Selects (does not return them) 
// obj.child.foo.baz[1].a 
// obj.child.foo.baz[2].a 
// obj.child.bar.baz[1].a 
// obj.child.bar.baz[2].a 
// Then performs an aggregate that returns value 125. 
$('obj.child[:2].baz[1:].a').sum() 

// Selects obj.foo, obj.bar, obj.child.foo.baz[0] and obj.child.bar.baz[0] 
$('obj *[typeof(number)]') 

// Selects obj.foo and obj.child.foo 
$('obj foo') 

// Other possible methods: delete(), set(), get() (as an array of values), 
// min(), max(), avg(), merge() etc etc. 

अंत में हालांकि, मैं नहीं दिख रहा है कि यह कैसे बहुत उपयोगी है। लेकिन एह, यह एक विचार है जो मुझे लगता है =)

Answer 4

सबसे सरल और आसान तरीका तत्व jQuery के साथ पाश यह प्रत्येक

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

$(obj).each(function(){ 
console.log(this); 
if(this.hasOwnProperty('foo')) 
{ 
    console.log("hey i found " + this.foo); 
} 
});