元素的 -1 索引是什么意思？

Question

I am trying to debug the jquery/js code below. So I was looking for the index of the elements. However it's returning -1 .

In jsFiddle it is working well. But when migrating to asp.net IDE, this is giving -1 .

The markup:

<div class="cart">
   <h2>Cart 1</h2>
   <p>Books </p> 
     <table class="cartcontent" data-options="fitColumns:true, singleSelect: true">                                
         <thead>
           <tr>
               <th data-options="field:'name',width:100">Name</th>
               <th data-options="field:'quantity',width:100">Quantity</th>
               <th data-options="field:'balance',width:100,align:'right'">Balance</th>
               <th data-options="field:'remove',width:100,align:'right'">Remove</th>
            </tr>
         </thead>
      </table>
</div>

jquery/js:

function loadData(cartIndex, event) {        
    alert($('.cart').index());
    var $cart = $('.cart:eq(' + cartIndex + ')');   
    alert($cart.index()); //returns -1
    $cart.find('.cartcontent').datagrid('loadData', data[cartIndex]);    

}

why is it returning -1 index here and what does this -1 mean?

Answer 1

-1 means the object cannot be found in the array.

$cart.index() returns -1 , hence whatever is in $cart can not be found. One line above, you assign $('.cart:eq(' + cartIndex + ')') to $cart . Hence the selector .cart:eq(' + cartIndex + ')' matches no element in your html.

Answer 2

It means the jQuery object $cart does not contain any element

.index()

If the element is not found, .index() will return -1.

Answer 3

Thanks everyone for helping out with all the ideas that I couldn't have thought of.

One of the main reasons the code didn't work as expected was due to the fact that jquery/js script function was called before DOM was loaded. That's what @Rory McCrossan first commented. I went through searching and landed on this article: Running Your Code at the Right Time .

@AmmarCSE from my earliest post actually asked me "so you mean you have a click handler attached to .cart and inside you want to load the table?"

I had no idea what that was in the context of jquery/javascript and this whole web thing. However that helped me a lot to understand perhaps I need an eventlistener and to think further why I must use a button click event and how pageload/domload doesn't suit this scenario.

@Arun P Johny stated many ways to find out if the elements are existing while running the code.

I put the js code execution here:

</body>

    <script>
        document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
        alert("haha DOM content is loaded");
        function theDomHasLoaded(e) {
            addAll(0, e);
        }
    </script>     
    <script type="text/javascript" src="cart_Test.js"> </script>

</html>

Coming from C# background with fairly comfortable VS IDE with great debugging facilities, I realized debugging jQuery, js codes are rather tedious.

Since this was a test to place the migration skeleton from jsfiddle to asp.net, I tried out with pageload, domload events. However in actual implementation I want to load these cart html tables on a button click event. By then entire DOM is anyway loaded. I learnt alot here today, thanks guys.