Number of elements in turn.js

Question

I have a number of divs with the class "append". The problem is that when I use the plugin turn.js, the function .size() return a wrong result Here is my 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>

And here is my js

$(window).load(function(){  

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


})

The first alert gives me the right answer, 22. But the second alert output 10!! And when I need to interact with an element above index 10, the jquery function just doesn't work

The big problem is that I can't manipulate de DOM elements above 10!

Depending on what version of jQuery you're using, the `size()` method is deprecated. Use `length` instead. — Foreign Object, Apr 23 '13 at 15:49
Same thing. It seems that the plugin is ignoring this elements — Renan Ferreira, Apr 23 '13 at 15:56
The thing is not just the number, is that I can't manipulate ".append" divs above 10 — Renan Ferreira, Apr 23 '13 at 16:01
all this "append" divs are droppable elements. But after the 10th element, it stop working. But it's not just the droppable. Even if I put $(".append").eq(10).hide(); it won't work — Renan Ferreira, Apr 23 '13 at 16:08

score 0 · Answer 1 · answered Apr 23 '13 at 16:13

0

Take a look at this fiddle I set up 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);

});

answered Apr 23 '13 at 16:13

Foreign Object

1,630
11
22

I really apreciate that you are trying to help me. Thanks a lot. But the thing that is causing this error is the plugin. – Renan Ferreira Apr 23 '13 at 16:18
The snippet above works, if you try to access item 11 like this ` item.eq( 11 ).attr('id')` , it returns the proper id. I've updated the fiddle. – Foreign Object Apr 23 '13 at 16:22

Number of elements in turn.js

1 Answers1