>我有一个案例,我想这样做:
var els = {
div: $('div'),
p: els.div.find('p'),
span: els.p.find('span')
};
但这种情况会发生:
console.log(els.div); // Works
console.log(els.p); // undefined
所以我目前正在这样做:
var els = (function(){
var div = $('div'),
p = div.find('p'),
span = p.find('span');
return {
div: div,
p: p,
span: span
}
}());
console.log(els.p); // Works now
有什么方法可以让它变干吗?似乎是一堆代码才能做到这一点。
您可以逐步构建它:
vars els = { div: $('div') };
els.p = els.div.find('p');
els.span = els.p.find('span');
或者像这样:
vars els = { };
els.div = $('div');
els.p = els.div.find('p');
els.span = els.p.find('span');
如果它对你来说看起来更一致。
你应该可以做这样的事情,对吧?
var els = {
div: $('div'),
p: this.div.find('p'),
span: this.p.find('span')
};
我使用了 this
关键字而不是对象内部的els
。
为了更进一步,您可以使用工厂模式为您处理对象创建。
function getChildElements(container, childTags) {
var elements = {};
// Default tags to find if none were specified.
childTags = childTags || [ "p", "span" ];
// Loop through the childTags and find them in the container
childTags.forEach(function (tag) {
elements[tag] = container.find(tag);
});
return elements;
}
客户端可以使用此工厂方法从父元素检索子元素,如下所示:
var els = getChildElements($("div"));