如何等待/檢查元素是否存在

Question

我想知道是否有一種方法可以檢查元素是否存在，然后執行一個功能，然后重復但帶有下一個id。

示例：如果log2643673存在，則執行功能，然后檢查或等待log2643674存在，如果存在，則執行功能

如果不存在，請繼續檢查是否存在並運行，然后找到下一個元素

 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> 

對不起，我的英語不好

Answer 1

嘗試這個

$(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*/ );

});

在這里玩

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

評估元素的長度是否大於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

如果您有隨機ID並且需要檢查元素是否存在，則可以執行以下操作：

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

假設您知道要查找的元素的起始ID，並且它們以數字順序排列。

您可以使用純Javascript執行此操作

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

妳去 :)

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