jquery store variable class (performance)

Question

I want to know what is the best way in term of performances to store variables for classes. I mean is it better to store one div id than to find all other class name thanks to children() function. Or is it better to write the class name in the variable?

for example like this:

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $customSlider.children().first(),
    $customSliderTimer = $customSliderInner.next().next().next().next(),
    $customSliderButtonLeft = $customSliderInner.next(), 
    $customSliderButtonRight = $customSliderInner.next().next(), 
    $customSliderLeft = $customSliderButtonLeft.children().first(), 
    $customSliderRight = $customSliderButtonRight.children().first(), 
    $customSliderPrevSlide = $customSliderLeft.children().next().next().children().first(),
    $customSliderNextSlide = $customSliderRight.children().next().next().children().first(), 
    $customSliderPage = $customSliderInner.next().next().next(),
    $customSliderTotalSlide = $customSlider.children().not($customSliderTimer,$customSliderInner,$customSliderPage).children().children().children().next().next(), 
    $customSlide = $customSliderInner.children(), 
    $customSlideContent = $customSlide.children().next().next(), 
    $customSlideContentInner = $customSlideContent.children(),
    $customSlideImage = $customSlide.children(':nth-child(1)'), 
    $customSlideVideo = $customSlideImage.children(), 
    $customSlidePlayer = $customSlideVideo.children(), 
    customSlideVideo = $customSlideVideo.attr('class'), 

or like this:

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $('#custom-slider-inner'),
    $customSliderTimer = $('#custom-slider-timer'),
    $customSliderButtonLeft = $('.custom-slider-buttons-left'),
    $customSliderButtonRight = $('.custom-slider-buttons-right'),
    $customSliderLeft = $('.custom-slider-left'),
    $customSliderRight = $('.custom-slider-right'),
    $customSliderPrevSlide = $('.custom-slider-prevSlide'),
    $customSliderNextSlide = $('.custom-slider-nextSlide'),
    $customSliderPage = $('#custom-slider-pages'),
    $customSliderTotalSlide = $('.custom-slider-totalSlide'),
    $customSlide = $('.custom-slide'),
    $customSlideContent = $('.custom-slide-content'),
    $customSlideContentInner = $('.custom-slide-content-inner'),
    $customSlideImage = $('.custom-slide-image'),
    $customSlideVideo = $('.custom-slide-video'),
    $customSlidePlayer = $('.slidePlayer'),
    customSlideVideo = '.custom-slide-video',

and the html structure:

<div id="custom-slider">
        <div id="custom-slider-inner">      
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./sintel.png)">
                    <div class="custom-slide-video">
                        <video controls class="slidePlayer">
                        <source type="video/mp4" src="./sintel2.mp4" />
                        </video>
                    </div>                   
                </div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content">
                    <div class="custom-slide-content-inner left"></div>
                </div>
            </div>
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./slide-5.png)">
                    <div class="custom-slide-video">
                        <video controls class="slidePlayer">
                        <source type="video/mp4" src="" />
                        </video>
                    </div>
                </div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content">
                    <div class="custom-slide-content-inner left"></div>
                </div>
            </div>
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./slide-4.jpg)"></div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content" style="color:#FFF">
                    <div class="custom-slide-content-inner right"></div>
                </div>     
            </div> 
        </div>  
        <div class="custom-slider-buttons-left">
            <div class="custom-slider-left">
                <div class="custom-slider-pagenb-overlay"></div>
                <i class="icon-angle-left"></i>
                <div class="custom-slider-left-pagenb">
                    <div class="custom-slider-prevSlide">1</div>
                    <div class="custom-slider-separator">/</div>
                    <div class="custom-slider-totalSlide">12</div>
                </div>
            </div>
        </div>
        <div class="custom-slider-buttons-right">
            <div class="custom-slider-right">
                <div class="custom-slider-pagenb-overlay"></div>
                <i class="icon-angle-right"></i>
                <div class="custom-slider-right-pagenb">
                    <div class="custom-slider-nextSlide">10</div>
                    <div class="custom-slider-separator">/</div>
                    <div class="custom-slider-totalSlide">12</div>
                </div>
            </div>
        </div>
        <div id="custom-slider-pages"></div>
        <div id="custom-slider-timer"></div> 
    </div> 

Answer 1

I would suggest using the combination of both.
First one is faster, because it accesses the DOM just twice. The second one accesses the DOM on each variable.

But I would use something like:

...
$customSlider = $('#custom-slider'),
$customSliderInner = $customSlider.find('.custom-slider-inner'),
$customSliderTimer = $customSlider.find('.custom-slider-timer')
...

It looks more elegant and is better optimized if you decide to change internal structure of elements inside #custom-slider