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中沒有顯示任何內容，但我嘗試刪除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; 

and

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

確定這是存在的，因爲我的變量我被事先設置到文件加載和檢查（）函數運行.. .. 所以我找到了解決方法是： 設置我作爲一個全局變量，並用setInterval來使它運行不斷1500秒檢查我選擇的，像這樣的長度：

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

這不可能是最好的達到此目的的方式，請任何有任何其他建議的人都可以在這裏找到。