Количество элементов в turn.js

Question

У меня есть несколько div с классом «append». Проблема заключается в том, что, когда я использую плагин turn.js, функция .size() возвращает неправильный результат Вот мой HTML

 <div id="book"> 
      <div class="folhas" id="0"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto0"></div> 
       <div class="legenda_div" id="legenda0"> 
        <textarea class='legenda'></textarea> 
       </div> 
      </div> 
      <div class="folhas" id="1"> 
       <div class='append' id="foto2"></div> 
       <div class="legenda_div"> 
        <textarea class='legenda'></textarea> 
       </div> 
      </div> 
      <div class="folhas" id="2"> 
       <img class="back_img_fixo" src="imagens/back1.png" width="100%"/> 
       <div class='append' id="foto2"></div> 
       <div class="legenda_div"> 
        <textarea class='legenda'></textarea> 
       </div> 
      </div> 
      <div class="folhas" id="3"> 
       <img class="back_img_fixo" src="imagens/back2.png" /> 
       <div class='append' id="foto3"></div> 
       <div class="legenda_div"> 
        <textarea class='legenda'></textarea> 
       </div> 
      </div> 
      <div class="folhas" id="4"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto4"></div> 
       <div class="legenda_div"> 
        <textarea class='legenda'></textarea> 
       </div> 
      </div> 
      <div class="folhas" id="5"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto5"></div> 
       <div class='append' id="foto6"></div> 
       <div class='append' id="foto7"></div> 
       <div class='append' id="foto8"></div> 
       <div class='append' id="foto9"></div>      
      </div> 
      <div class="folhas" id="6"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto10"></div> 
       <div class='append' id="foto11"></div> 
      </div> 
      <div class="folhas" id="7"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto12"></div> 
       <div class='append' id="foto13"></div> 
       <div class='append' id="foto14"></div> 
      </div> 
      <div class="folhas" id="8"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto15"></div> 
       <div class='append' id="foto16"></div> 
       <div class='append' id="foto17"></div> 
       <div class='append' id="foto18"></div> 
      </div> 
      <div class="folhas" id="9"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto19"></div> 
       <div class='append' id="foto20"></div> 
      </div> 
      <div class="folhas" id="10"> 
       <div class="back_img" ></div> 
       <div class='append' id="foto21"></div> 
      </div> 
     </div> 

А вот мой JS

$(window).load(function(){ 

    alert($(".append").size()); 
    $('#book').turn({ 
     gradients: true, 
      acceleration: true 
    }); 
    alert($(".append").size()); 


}) 

Первый предупреждение дает мне правильный ответ, 22. Но второй вывод предупреждения 10! И когда мне нужно взаимодействовать с элементом выше индекса 10, функция jquery просто не работает

Большая проблема в том, что я не могу манипулировать элементами DOM выше 10!

Answer 1

Взгляните на эту скрипку настроить http://jsfiddle.net/y8xaX/

$(window).load(function(){ 

var item = $('#book').find('.append'); 
var len = item.length; 
alert(len); 

$('#book').turn({ 
    gradients: true, 
     acceleration: true 
}); 
alert(len); 

});