javascript - 如何等待/检查元素是否存在

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>