How to wait / check if elements exist

Question

I was wondering is there a way for me to check if element exist then do a function then repeat but with next id.

example: if log2643673 exist do function then check or wait for log2643674 exist and if exist then do function

if it dose not exist keep checking into it exist and do function and then find next element exist

var checkExist = setInterval(function() {
   if ($('#log2643673').length) {
      console.log("it exists!");
   }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="log2643670" data-log="2643670" class="logs">Text here</li>

<li id="log2643671" data-log="2643671" class="logs">Text here</li>

<li id="log2643672" data-log="2643672" class="logs">Text here</li>

<li id="log2643673" data-log="2643673" class="logs">Text here</li>

sorry for my bad english

How do you figure out "the next id"? Do you have a list of IDs? Are they always in order? — Mark, Aug 16 '18 at 04:02
do you know the maximum amount of elements you are expecting? — Nico, Aug 16 '18 at 04:02
@Mark Meyer no i do not have a list of id's and yes they load in order — RajWinx, Aug 16 '18 at 04:11
@Nico the maximum amount of elements i'm expecting is endless — RajWinx, Aug 16 '18 at 04:12
Possible duplicate of [Is there an "exists" function for jQuery?](https://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery) — peeebeee, Aug 16 '18 at 06:48

score 3 · Answer 1 · edited Aug 16 '18 at 06:34

3

Try this

$(function() {
    var logIdStart = 2643670; // the start log id
    // timer to check if element exists
    var checkExist = setInterval(function() {
       if ($("#log" + logIdStart ).length) {
          console.log("it exists!");
          logIdStart++; // update id only if element is found             
       }
    }, 1000 /* change checking frequency if needed*/ );

});

Play here

$(function() {
    var logIdStart = 2643670; // the start log id
    $('button').on('click',function(){   
     $("body").append('<li id="log'+logIdStart+'">log'+logIdStart+'</li>');
    
    });
    // timer to check if element exists
    var checkExist = setInterval(function() {
       if ($("#log" + logIdStart ).length) {
          $("body").append("log" + logIdStart + " exists!<br />");
          logIdStart++;
       }
    }, 1000 /* change checking frequency if needed*/ );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="log2643670" data-log="2643670" class="logs">Text here</li>

<li id="log2643671" data-log="2643671" class="logs">Text here</li>

<li id="log2643672" data-log="2643672" class="logs">Text here</li>

<li id="log2643673" data-log="2643673" class="logs">Text here</li>
<div>
<button>Add Input</button>
</div>

edited Aug 16 '18 at 06:34

shajji

1,517
10
14

answered Aug 16 '18 at 04:22

kiranvj

32,342
7
71
76

1

logical issue in your code [kiranvj](https://stackoverflow.com/users/1188322/kiranvj). – shajji Aug 16 '18 at 04:40
1) when element added in DOM it will not update variables in your example **$logElement**. 2) **logIdStart ** is not incrementing, it just adding 1 on 2643670 every time on this line **$logElement = $("#log" + (logIdStart + 1))**. – shajji Aug 16 '18 at 04:48
@shajji I didnt get it, you mean `$logElement = $("#log" + (logIdStart + 1))` not working? – kiranvj Aug 16 '18 at 04:51
i mean it always get same element because $("#log" + (2643670 + 1)), everytime 1 added to 2643670, executing this line 1000 times always give u $('#log2643671'), sorry for english – shajji Aug 16 '18 at 05:01
@shajji it will reflect as long as the start element id is `"log" + logIdStart`, because we are checking it in every 1 sec – kiranvj Aug 16 '18 at 05:16
check this [example](http://jsfiddle.net/yj40hrgb/), i guess u did it by mistake, your **$logElement = $("#log" + logIdStart );** inside the if condtion. u should place outside the if condtion – shajji Aug 16 '18 at 05:20
@shajji it should work as we are checking `$logElement.length` everytime inside the timer. Check this example https://jsfiddle.net/1pgekc8s/4/ – kiranvj Aug 16 '18 at 05:38
what will happened when element dynamically added ? https://jsfiddle.net/1pgekc8s/17/ – shajji Aug 16 '18 at 05:57
1

@shajji I got your point here, I have updated the answer. You should have added the answer, you deserve the credits. :) – kiranvj Aug 16 '18 at 06:17
thnx :) @Kiranvj – shajji Aug 16 '18 at 06:27

score 0 · Answer 2 · edited Aug 16 '18 at 04:28

0

Evaluate if the length of the element is greater than cero.

var string_part = '#log';
var initial_number = 2643670;
var checkExist = setInterval(function() {
   var element = $(string_part + initial_number);
   if (element.length > 0) {
      console.log("it exists!");
      initial_number ++;
   }
}, 1000);

edited Aug 16 '18 at 04:28

shajji

1,517
10
14

answered Aug 16 '18 at 03:59

michaelitoh

2,317
14
26

Saurin Vala · Answer 3 · 2018-08-16T09:25:21.630

In case you have random IDs and need to check element is exists or not then you can do this :

$(function() {

    var myListOfIds=$('li');   //Hold all the li tags.    
    var cnt=0;  // we will use it in array iterate.
     
    // timer to check if element exists
    var checkExistInterval = setInterval(function() {
        if(cnt== (myListOfIds.length)){
          console.log(" Yeah, clear the interval,we have done it :)")
          clearInterval(checkExistInterval);
        }         
        else if ($("#" + myListOfIds[cnt].id ).length) {
              console.log(myListOfIds[cnt].id +" Yes, I am in...");
              cnt++; 
        } 
    }, 1000 /* Lets change checking frequency if needed*/ );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="log2643670" data-log="2643670" class="logs">Text here</li>

<li id="log2643671" data-log="2643671" class="logs">Text here</li>

<li id="log2643672" data-log="2643672" class="logs">Text here</li>

<li id="log2643673" data-log="2643673" class="logs">Text here</li>

<li id="IAmRandom" data-log="2643673" class="logs">Text here</li>
<div>

</div>

score 0 · Answer 4 · edited Aug 16 '18 at 04:58

0

Assuming that you know the starting id of your elements which you are trying to find and they come in numeric order.

You can use pure Javascript to do this

let counter = 2643670;
let checkExist = setInterval(function() {
   const id = 'log' + counter;
   const element = document.getElementById(id);
   if (!!element) {
      // Do you function call here
      counter++;
   }
}, 1000);

edited Aug 16 '18 at 04:58

shajji

1,517
10
14

answered Aug 16 '18 at 04:16

Nico

1,961
17
20

score 0 · Answer 5 · answered Aug 16 '18 at 05:06

0

There you go. :)

 function checkExist(startID) {
     setInterval(() => {
       if (document.getElementById(startID)) {
         console.log(`ID ${startID++} exists`);
       }
     } ,1000)
 }

answered Aug 16 '18 at 05:06

UtkarshPramodGupta

7,486
7
30
54

How to wait / check if elements exist

5 Answers5