How functions get evaluated in Jquery.?

Question

My HTML,

<div id="fullcontainer">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

JS,

   var cache = $('#fullcontainer').children();
   var index = cache.length - 2;
   cache.filter(':lt('+ index +')').remove();

The code that i had given above is working fine as expected, since i have cached the length in a separate variable, But the following code without caching is not working,

   var cache = $('#fullcontainer').children();
   cache.filter(':lt('+ cache.length - 2 +')').remove();

As far as i have learned the expressions at the last level should be evaluated first, But i dont know what is happening with the above piece of codes, Please advice and provide some explanations.

DEMO of the working one , Demo of the non - working one

Answer 1

Its will work if you enclose cache.length - 2 in brackets like,

cache.filter(':lt('+ (cache.length - 2) +')').remove();

Working Demo

Answer 2

Your code cache.filter(':lt('+ cache.length - 2 +')').remove(); get evaluated to

cache.filter('NaN)').remove();

it should be

cache.filter(':lt('+ (cache.length - 2) +')').remove();

Answer 3

You need to wrap your value in brackets ( ) to make it evaluated as number:

cache.filter(':lt('+ (cache.length - 2) +')').remove();

Updated Fiddle