jquery variable .length :visible always returns 0?

Question

Ok I have a variable checking for visible divs on page then getting the length but it always returns 0 why? this is my html structure:

<div class="addnew">
    <input type="text">
    <input type="text">
        <div class="addinput">
            <a href="#" class="addnew">ADD NEW</a>
                <div class="div_2">
                    <h4>lorem ipsum</h4>
                    <div class="div"><img src="" alt=""></div>
                    <p><label for=""></label><input type="text" /></p>
                    <a class="remNew" href="">REMOVE</a>
                </div>
                <div class="div_3">
                    <h4>lorem ipsum</h4>
                    <div class="div"><img src="" alt=""></div>
                    <p><label for=""></label><input type="text" /></p>
                    <a class="remNew" href="">REMOVE</a>
                </div>
        </div>
</div>

this is all of my js:

(function ($) {
    //check if box has value allready and show if it has
    check1 = function () {
        var empty1 = $("#widgets-right .div_2  p .title2:input").filter(function () {
            return this.value == "";
        });
        if (empty1.length) {
            $('.div_2').hide();
        } else {
            $('.div_2').show();
        };
    }
    check2 = function () {
        var empty2 = $("#widgets-right .div_3  p .title3:input").filter(function () {
            return this.value == "";
        });
        if (empty2.length) {
            $('.div_3').hide();
        } else {
            $('.div_3').show();
        };
    }
    check3 = function () {
        var empty3 = $("#widgets-right .div_4  p .title4:input").filter(function () {
            return this.value == "";
        });
        if (empty3.length) {
            $('.div_4').hide();
        } else {
            $('.div_4').show();
        };
    }
    check4 = function () {
        var empty4 = $("#widgets-right .div_5  p .title5:input").filter(function () {
            return this.value == "";
        });
        if (empty4.length) {
            $('.div_5').hide();
        } else {
            $('.div_5').show();
        };
    }
    check5 = function () {
        var empty5 = $("#widgets-right .div_6  p .title6:input").filter(function () {
            return this.value == "";
        });
        if (empty5.length) {
            $('.div_6').hide();
        } else {
            $('.div_6').show();
        };
    }

    //load on page load
    $(".area").load("/galleries/ #projects > li a");
    $('body').ajaxSuccess(function (evt, request, settings) {
        check1();
        check2();
        check3();
        check4();
        check5();
    });
    //load on widget title click
    $(document).on("click", '#widgets-right .widget-top', function () {
        $(".area").load("/galleries/ #projects > li a");
        check1();
        check2();
        check3();
        check4();
        check5();
    });
    // variables
    var i = $('#widgets-right .addinput > div').find(':visible').length + 2;
    var addDiv = $('.addinput');
    //stop default href from working
    $(document).unbind().on("click", '.area a', function () {
        event.preventDefault();
        return;
    });
    //show new forms
    $(document).on('click', '#widgets-right .addNew', function () {
        if (i === 10) {
            alert('thats the max!');
        } else if (i === 9) {
            alert('one more to go be careful now your gonna break me, Now pick one more image!');
            $('.div_' + i + '').show('slow');
            i++;
            return false;
        } else {
            alert(i);
            $('.div_' + i + '').show('slow');
            i++;
            alert('Now pick another image');
            return false;
        }
    });
    //remove old forms
    $(document).on('click', '#widgets-right .remNew', function () {
        if (i > 1 && jQuery(this).parent('div').next().is(':visible')) {
            alert('remove me in order please.');
        } else {
            i--;
            $('.title' + i).val("");
            $('.link' + i).val("");
            $('.img' + i).val("");
            $('.gallery_one' + i).attr("src", '');
            $(this).parent('div').hide('slow');
        }
        return false;
    });
    //load into input boxes 
    $(document).on("click", "#widgets-right .area a", function () {
        $(this).toggleClass('selected');
        if (i <= 2) {
            alert('added to project 1. If you want to add more projects just click button labeled "add new project"!');
            var title = $(this).attr('title');
            $(".title").val(title);
            var link = $(this).attr('href');
            $(".link").val(link);
            var img = $("img", this).attr('src');
            $(".img").val(img);
            var imgexample = $("img", this).attr('src');
            $(".gallery_one").attr("src", imgexample);
        } else {
            i--;
            alert('added to project ' + i);
            var title = $(this).attr('title');
            $('.title' + i).val(title);
            var link = $(this).attr('href');
            $('.link' + i).val(link);
            var img = $('img', this).attr('src');
            $('.img' + i).val(img);
            var imgexample = $('img', this).attr('src');
            $('.gallery_one' + i).attr("src", imgexample);
            i++;
        }
    });
}(jQuery));

and the variable that is giving me always 0 is this one:

var i = $('#widgets-right .addinput > div').find(':visible').length + 2;

now I have a feeling it might be because this: #widgets-right .addinput > div selector has by default a display none on it in the css, but i have tried removing the css and still to no avail.. If i strip the variable down to var i = $('#widgets-right .addinput > div').length + 2; it returns the correct length: I have also tried the following and all return 0:

var i = $('#widgets-right .addinput > div').filter(':visible').length + 2;

and:

var i = $('#widgets-right .addinput > div').filter(':visible').find().length + 2;

and:

var i = $('#widgets-right .addinput > div:visible').find().length + 2;

and

var i = $('#widgets-right .addinput > div').find(':visible').length + 2;

but all return 0. Why? this is a stripped down version of the js as requested:

(function ($) {
    //check if box has value allready and show if it has
    check1 = function () {
        var empty1 = $("#widgets-right .div_2  p .title2:input").filter(function () {
            return this.value === "";
        });
        if (empty1.length) {
            $('.div_2').hide();
        } else {
            $('.div_2').show();
        }
    };
    check2 = function () {
        var empty2 = $("#widgets-right .div_3  p .title3:input").filter(function () {
            return this.value === "";
        });
        if (empty2.length) {
            $('.div_3').hide();
        } else {
            $('.div_3').show();
        }
    };
    //load on page load
    $(".area").load("http://nettsidemal.no/lundhsas/galleries/ #projects > li a");
    $('body').ajaxSuccess(function (evt, request, settings) {
        check1();
        check2();
    });
    //load on widget title click
    $(document).on("click", '#widgets-right .widget-top', function () {
        $(".area").load("http://nettsidemal.no/lundhsas/galleries/ #projects > li a");
        check1();
        check2();
    });
    // variables
    var i = $('#widgets-right .addinput > div').find(':visible').length + 2;

    //show new forms
    $(document).on('click', '#widgets-right .addNew', function () {
        if (i === 10) {

            alert('thats the max!');
            } else if (i === 9) {
alert(i);

i++;
            } else {
                alert(i);
i++;
            }
        });
    });
    }(jQuery));

`

Answer 1

ok this was occuring because my variable i was being set prior to the document loading and the check() functions running.... so the fix i found is: to set i as a global variable, and use setinterval to make it run ever 1500 second checking the length of my selector like so:

        setInterval(function() {
      // Do something every 5 seconds
      i = jQuery('#widgets-right').find('.addinput > div:visible').length + 2;
}, 1500);

this can't be the best way to achive this, please anyone with any other suggestions make them here.