CODEWITHSUNDEEP
javascriptjqueryhtmlconsole.log
MORHERO
MORHERO

Reputation: 116

jQuery .size() function doesn´t work with a variable

At many points in my code I need to know how many .page classes are used. To know this I use $(".page").size() I want to save this information into a variable. So I wrote this:

var vari = { 
    *more variables*
    totalPageCount : $(".page").size()
};

The Problem is that vari.totalPageCount always gives 0 back.

With console.log() I get this:

console.log($(".page").size());    // Return 8
console.log(vari.totalPageCount);  // Return 0

Edit: Here is a example how i use it.

JS:

var vari = {

    currentPage : 0, 
    pageAnimations : 0, 
    animationList : ".fade-in, .fade-out",
    totalPageCount : $(".page").size(),

};

var footer = {

    html : function(){
        var html;
        var date = this.date();

        for(var i=0; i<vari.totalPageCount; i++){
            html = '<span class="pageNumber" id="pageNumber">Folie:'+i+'  &#8226;  '+vari.custom["companyName"]+'  &#8226;  '+date+'</span>';
            $("#normalPage"+i).append(html);
        }

        return;
    }

};

HTML:

<body class="presWrapper">
    <div class="pageWrapper">   
        <div class="page startPage" id="startPage">
            <h2 class="mainTitle">Lorem</h2>
            <h4 class="subTitle">Ipsum</h4>
        </div>
    </div>
    <div class="pageWrapper">
        <div class="page normalPage" id="normalPage1">
            <div class="content">
                <p class="fade-in">HELLO WORLD</p>
            </div>
        </div>
    </div>
    <div class="pageWrapper">
        <div class="page endPage" id="endPage">
            <div class="content">    
                <p class="fade-out">HELLO SATURN</p>
                <p class="fade-out">HELLO WORLD</p>
                <p class="fade-in">HELLO WORLD</p>
                <p>pTag</p>
            </div>    
        </div>
    </div>
</body>

Any suggestions to solve this problem?

Upvotes: 1

Views: 693

Answers (3)

Scott Fanetti
Scott Fanetti

Reputation: 136

  • vari.totalPageCount Gets evaluated only when it is declared.
  • As a result it will only have the value of $(".page").size() when it is first run.

Unless you are waiting on document ready the children of .page have not yet been added and it has length 0.

When you later call the console and execute the selector again - you get the true count in the console message - but the stored value has already been calculated as 0 within vari.

length() and size() are equivalent functions in jquery but size has been deprecated so length is the appropriate function to call. But in either case - its likely you are just evaluating the length too early when the vari object is constructed for it to have a meaningful value.

Does the following give you the wrong value for the property:

$(document).ready(function () {
     var vari = {totalPageCount: $('.page').length};
     console.log(vari.totalPageCount);
});

Relevant documentation

Upvotes: 4

wmash
wmash

Reputation: 4202

This will increment count for every element with having the page class

var count = 0;
$('.page').each(function() {
    count++;
});

var vari = { 
    totalPageCount: count
};

Working jsFiddle

Upvotes: 0

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

The .size() method is deprecated as of jQuery 1.8.

Use length property instead:

var vari = { 
    *more variables*
    totalPageCount : $(".page").length;

};

Also, make sure you are using this code at the bottom of the script or inside a document ready handler. You won't get accurate information if you try to get it before DOM has been fully setup.

Upvotes: 0

Related Questions