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

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

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

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

Answer 3

为了更进一步，您可以使用Factory Pattern来为您处理对象创建。

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

文字对象和jquery选择器DRY

3 个答案: