jquery变量length:visible始终返回0

Question

好的，我有一个变量检查页面上的可见div，然后获取长度，但它总是返回0，为什么？这是我的html结构：

<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>

这是我所有的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));

给我的变量总是0，这是一个：

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

现在我有一种感觉，这可能是因为：#widgets-right .addinput > div选择器默认情况下在css中显示none，但我已经尝试删除css，但仍然无效。。如果我将变量缩减为var i = $('#widgets-right .addinput > div').length + 2;它返回正确的长度：我还尝试了以下所有返回0:

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

和：

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

和：

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

和

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

但是全部返回0。为什么？这是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();
        }
    };
    //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

好吧，之所以会发生这种情况，是因为我的变量i是在加载文档和运行check（）函数之前设置的。。。。所以我找到的解决方案是：将i设置为全局变量，并使用setinterval使其每1500秒运行一次，检查我的选择器的长度，如下所示：

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

这不是实现这一目标的最佳方式，请任何有其他建议的人在这里提出。