jquery 변수 .length : visible은 항상 0을 반환합니까?

Question

좋아요. 페이지에서 div가 표시되는지 변수를 확인한 다음 길이를 가져 오는 변수가 있지만 항상 0을 반환합니다.

<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의 전부입니다 : 이 내 HTML 구조입니다

(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를 제거하고 아직 아무 소용이 시도 ... 에 올바른 길이를 반환 아래로 난 변수를 제거하면 91,363,210는 :

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; 

을 은 또한 다음과 같은 모든 반환 0 시도

및

하지만 모두 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)은 원고 적재 체크() 함수를 실행하기 전에 설정되기 때문에 이것이 발생하는 하였다 OK .. .. 그래서 내가 찾은 수정은 다음과 같습니다 전역 변수로 난을 설정하고, 그렇게처럼 내 선택의 길이를 확인 이제까지 1,500초 실행하기 위해 setInterval을 사용 :

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

것은이되지 않을 수 있습니다 최고 방법을 얻으려면 다른 제안이있는 사람이라면 누구나 여기에 만들어주십시오.