(jQuery) 无法 select nth-child 的 class

Question

我无法 select 第二个 class notification。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="vzdevek">Vzdevek</label>
  <input type="text" id="vzdevek" />
  <small class="notification">Username required!</small>
</div>
<br />
<div>
  <label for="komentar">Komentar</label>
  <textarea id="komentar"></textarea>
  <small class="notification">Comment required!</small>
</div>

我可以select先class使用(".notification:first")进行通知，但是second class 如果我使用此 select 或：(".notification:nth-child(2)")

则无法正常工作

JSfiddle link: https://jsfiddle.net/ss2pkjsw/

Answer 1

在 jQuery 中你应该使用等号选择器 :eq()，像这样：

$(".notification:eq(1)")

Answer 2

我发现它只适用于 $(".notification:eq(1)")

Answer 3

最好使用 DOM 关系到目标 .next() 元素

$("#vzdevek").next(".notification").show();
$("#komentar").next(".notification").show();

$(document).ready(function() {
  $("#dialog").hide();
  $(".notification").hide();
});

$(document).ready(function() {
  $(".card-link:nth-child(1)").click(function() {

    $("#dialog").dialog({ //autoOpen: false
      buttons: {
        'Add': function() {
          $(".notification").hide();
          $("#vzdevek, #komentar").each(function() {
            if ($(this).val() == '')
              $(this).next(".notification").show();
          });

          if ($(".notification").is(':visible') == false) {
            alert("OK!");
          }
        },
        'Cancel': function() {
          $(this).dialog('close');
        }
      }
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="jquery-ui@*" rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script data-require="jquery-ui@*" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="dialog" title="Insert comment">
  <form>
    <div>
      <label for="vzdevek">Vzdevek</label>
      <input type="text" id="vzdevek" />
      <small class="notification">Vzdevek je obvezen!</small>
    </div>
    <br />
    <div>
      <label for="komentar">Komentar</label>
      <textarea id="komentar"></textarea>
      <small class="notification">Komentar je obvezen!</small>
    </div>
  </form>
</div>

<div class="container">
  <div class="card" style="width: 40em; margin: 0 auto;">

  </div>

  <div class="card-block">
    <a href="#/" class="card-link">Add comment</a>
  </div>
</div>

Updated Fiddle

(jQuery) 无法 select nth-child 的 class

(jQuery) unable to select nth-child of a class

jquery

jquery-selectors