Question

I have a case where I want to do this:

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

But this happens:

console.log(els.div); // Works
console.log(els.p); // undefined

So I’m currently doing this:

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  

Is there any way I can make it DRYer? Seems like a bunch of code to just be able to do that.

Answer 1

You could build it step by step:

vars els = { div: $('div') };
els.p    = els.div.find('p');
els.span = els.p.find('span');

Or like this:

vars els = { };
els.div  = $('div');
els.p    = els.div.find('p');
els.span = els.p.find('span');

if it seems more consistent to you.