处理标签的简单条件（JQuery，javascript）

Question

我想写一个条件来处理标签。

$("#btn").click(function() {
  setInterval(function() {
    var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
    $('#div2').html(number);
    var $div3 = $("#div3");
    if (number > 50) {
      var span1 = $('<span />').addClass('yes').text('YES');
      span1.appendTo($div3);
      checkSpan(span1);
    } else {
      var span2 = $('<span />').addClass('no').text(' NO');
      span2.appendTo($div3);
    }
  }, 1000);
});

function checkSpan($span) {
  if ($span.prevUntil('.no', '.yes').length === 2) {
    [].forEach.call(document.querySelectorAll('.yes'), function(e) {
      e.parentNode.removeChild(e);
    });
    [].forEach.call(document.querySelectorAll('.no'), function(e) {
      e.parentNode.removeChild(e);
    });
    var Reset = $('<span />').addClass('reset').text("RESET");
    Reset.appendTo($("#div3"));
  }
}

.yes,
.no,
.reset {
  display: inline-block;
  padding: 5px;
  text-align: center;
  margin: 1px;
}

.yes {
  background-color: green;
  color: white;
}

.no {
  background-color: red;
}

.reset {
  background-color: #5f79ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="background-color: #cce1ee;text-align: center;width: 500px;height: 500px;margin: 0 auto;">
  <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px" />
  <div id="div2"></div>
  <div id="div3"></div>
</div>

在这里，我们看到 (3 <span class="yes">YES</span>) 之后，所有带有 .yes 和 .no 类的 spans 标签都将被删除 并创建了这个<span class="reset">RESET</span>。

现在我想要一个条件 => 如果在 <span class="reset">RESET</span> 之后有 <span class="yes">YES</span> 吗？ 如是？ 所以警报（“重置后有类是跨度标签”） 别的 { alert（“Reset 后没有带有 yes 类的 span 标签”） }

例子：

如果

<span class="reset">Reset</span>
<span class="yes">YES</span>

做事....

Answer 1

如果我明白你想要什么：

$("#btn").click(function() {
  var nbyes = 0;
  setInterval(function() {
    var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
    $('#div2').html(number);
    var $div3 = $("#div3");
    if (number > 50) {
      if(nbyes == 3){
         nbyes = 0;
         alert("there is span tag with class yes after Reset");
      }
      var span1 = $('<span />').addClass('yes').text('YES');
      span1.appendTo($div3);
      nbyes++;
      if(nbyes == 3){
         checkSpan();
      }
    } else {
      if(nbyes == 3){
         nbyes = 0;
         alert("there is no span tag with class yes after Reset");
      }    
      var span2 = $('<span />').addClass('no').text(' NO');
      span2.appendTo($div3);
    }
  }, 1000);
});

function checkSpan($span) {
  $(".yes, .no").remove(); 
  var Reset = $('<span />').addClass('reset').text("RESET");
  Reset.appendTo($("#div3"));
}

.yes,
.no,
.reset {
  display: inline-block;
  padding: 5px;
  text-align: center;
  margin: 1px;
}

.yes {
  background-color: green;
  color: white;
}

.no {
  background-color: red;
}

.reset {
  background-color: #5f79ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="background-color: #cce1ee;text-align: center;width: 500px;height: 500px;margin: 0 auto;">
  <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px" />
  <div id="div2"></div>
  <div id="div3"></div>
</div>