Question

我要检查我的元素在当前页面上是否存在。例如，我有一个功能来检查元素是否存在。但是当我离开页面到另一个页面功能时不会重新加载。我收到此错误消息：

$(document).bind('scroll', function (ev) {
  10 |         var scrollOffset = $(document).scrollTop();
> 11 |         var containerOffset = $('.aboutTop .left').offset().top - window.innerHeight;
  12 |         if (scrollOffset > containerOffset) {
  13 |             $('.aboutTop .left').addClass('load');
  14 |         }

我用window.location.href检查了我的地址这是我的代码：

 var $ = require('jquery/dist/jquery.min.js');
    var pathname = window.location.href;
    var p = pathname.replace(/[^a-z0-9A-Z]/gi,'');
    console.log("milad");
    console.log(p);
    if (p != 'httplocalhost3000'){
             console.log("mohammad");
    } else{
        $(document).bind('scroll', function (ev) {
            var scrollOffset = $(document).scrollTop();
            var containerOffset = $('.aboutTop .left').offset().top - window.innerHeight;
            if (scrollOffset > containerOffset) {
                $('.aboutTop .left').addClass('load');
            }
        });
        $(document).bind('scroll', function (ev) {
            var scrollOffset = $(document).scrollTop();
            var containerOffset = $('.download .buttons').offset().top - window.innerHeight;
            if (scrollOffset > containerOffset) {
                $('.download .buttons').addClass('load');
            }
        });
        $(document).bind('scroll', function (ev) {
            var scrollOffset = $(document).scrollTop();
            var containerOffset = $('.download .buttons').offset().top - window.innerHeight;
            if (scrollOffset > containerOffset) {
                $('.download .buttons').addClass('load');
            }
        });
    }

然后我想用ref检查元素，但是我在ref中找不到偏移量元素。

This is my function :

     var pathname = window.location.href;
        console.log(pathname);
        if (pathname != 'http://localhost:3000/#/') {
        } else if (pathname == 'http://localhost:3000/#/'){
          if(this.state.flag){
            $(document).bind('scroll', (ev) => {
              var scrollOffset = $(document).scrollTop();
              var containerOffset = this.myCountUp.spanElement.offsetTop - window.innerHeight;
              if (scrollOffset > containerOffset) {
                if (this.state.flag) {
                  startAnimation(this.myCountUp);
                  this.setState({
                    flag : false
                  })
                }
              }
            });
          }  
        }

我该怎么办？

Answer 1

据我了解，您可以先检查类/元素的长度，因此如果length为true，则仅执行偏移代码块。我的意思是通过此链接：

var elmLength = $('.aboutTop .left').length;
if (elmLength){
   var containerOffset = $('.aboutTop .left').offset().top - window.innerHeight;
   if (scrollOffset > containerOffset) {
     $('.aboutTop .left').addClass('load');
   }
}
else{}

希望这会对您有所帮助。

Answer 2

在检查文档是否存在时，您可以尝试使用此代码。

当元素长度不超过0时，会发现否则找不到。

if($(document).find('.myclass').length>0){

  $('#myId').text('found Your Element of myclass');
  
  // when find your element thwn
}else {
  $('#myId').text('Not Found Your Element of myclass');
  //when not found code here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="footer-index">
  <h3>Index</h3>
  <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Case Studies</a></li>
      <li><a href="#">People</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
  
  <p class="myclass">some content</p> 
  
</div>

<div id="myId"></div>

如何检查当前页面上是否存在元素

2 个答案: