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

Answer 1

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> 

Answer 2

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

Answer 3

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> 

Answer 4

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

Answer 5

There you go. :)

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