Question

我无法选择第二类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>

我可以使用(".notification:first")选择 第一个 类进行通知，但 第二个 类是如果我使用此选择器，则无法正常工作：(".notification:nth-child(2)")

JSfiddle链接：https://jsfiddle.net/ss2pkjsw/

Answer 1

在jQuery中你应该使用equals selector :eq()，如下所示：

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

Answer 2

我发现它仅适用于int process_list(node_t *head){ char c; node_t *prev = head; /* Define pointer to point the previous node */ head->next = NULL; head->data = getchar(); /* Insert the first char to the head's data property */ if ( head->data == EOF ) { return head; } while ( (c = getchar()) != EOF ) { node_t *current = (node_t *) malloc(sizeof(node_t)); current->data = c; current->next = NULL; prev->next = current; prev = current; } print_list(head); return 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）无法选择类的nth-child

3 个答案: