javascript - 文字对象和 jquery 选择器 DRY

Question

我有一个案例，我想这样做：

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  

有什么办法可以让它更干燥吗？似乎是一堆代码才能做到这一点。

Answer 1

您可以逐步构建它：

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

如果它对你来说似乎更一致。

Answer 2

为了更进一步，您可以使用工厂模式为您处理对象创建。

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

Answer 3

你应该能够做这样的事情，对吧？

var els = {
    div: $('div'),
    p: this.div.find('p'),
    span: this.p.find('span')
};

我使用this关键字而不是els在对象内部。