HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery div .is() demo</title>
  <style>
    div { width: 60px; height: 60px; margin: 5px; float: left; border: 4px outset;
      background: green; text-align: center; font-weight: bold; cursor: pointer; }
    .blue { background: blue; color: white; }
    .red { background: red; color: white; }
    p { clear: both; color: red; font-weight: bold; background: yellow; display: none; padding: 6px; }
  </style>
</head>
<body>
  <div>1</div>
  <div class="blue">2</div>
  <div class="red">3</div>
  <div><span>Peter</span></div>
  <p id="msg"></p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("div").one("click", function () {
      var msg = $("#msg");
      if ($(this).is(":first-child")) {
        msg.text("It's the first div.");
      } else if ($(this).is(".blue,.red")) {
        msg.text("It's a blue or red div.");
      } else if ($(this).is(":contains('Peter')")) {
        msg.text("It's Peter!");
      } else {
        msg.text("It's nothing special.");
      }
      msg.show();
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery div .is() click tests (Try It)