How to check if an element exist on current page

Question

I want to check my element exist on current page. for example I have a function to check a element is exist and it. but when i leaving the page to another page function is not reload. and I got this error message :

$(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 |         }

I checked my address with window.location.href This is my code :

 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');
            }
        });
    }

then i want to check element with ref but I cant find offset element in 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
                  })
                }
              }
            });
          }  
        }

What should I do?

`$('.aboutTop .left')` most likely doesn't give you a result on the new page, so trying to do `.offset().top` will not work. — Tholle, Jul 14 '18 at 10:47
This question already has an answer here: https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — flowerszhong, Jul 14 '18 at 12:01

score 0 · Answer 1 · answered Jul 14 '18 at 11:19

0

As I understood, You can check the length of your class/element first, so if length will true then only offset code block will execute. I mean by something link this:

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

Hope this will help you.

answered Jul 14 '18 at 11:19

kravisingh

1,640
12
16

Should be caching the `$('.aboutTop .left')` instead of searching dom 3 times for same thing – charlietfl Jul 14 '18 at 11:54
No, you can't caching `$('.aboutTop .left')`, you just can store this in a global var. – kravisingh Jul 14 '18 at 12:08
Huh? that makes no sense. Do it just before `var elemLength` then used the stored object reference inside the `if()` – charlietfl Jul 14 '18 at 14:45

score 0 · Answer 2 · answered Jul 14 '18 at 11:37

when checking your document is item exists then you can try this code.

when element length is up to 0 then it finds otherwise not found.

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>

How to check if an element exist on current page

2 Answers2