jQuery（$（this）.parent（）發現不起作用

Question

我似乎無法讓jquery在我擁有的產品網格上工作。 知道如何設置嗎？

<div id="sold-out" style="margin-top: 10px">
  <a class="grid-view-item__link grid-view-item__image-container" href=
  "/products/moringa-and-coconut-soap"></a>
  <form accept-charset="UTF-8" action="/contact#contact_form" class=
  "contact-form" id="contact_form" method="post" name="contact_form">
    <a class="grid-view-item__link grid-view-item__image-container" href=
    "/products/moringa-and-coconut-soap"><input name="form_type" type="hidden"
    value="contact"><input name="utf8" type="hidden" value="✓"></a>
    <p><a class="grid-view-item__link grid-view-item__image-container" href=
    "/products/moringa-and-coconut-soap"></a><a class=
    "product-page-notify-me notify-me" href="#" style="color: #788188;">Email
    me when available</a></p>
    <div class="clearfix notify-me-wrapper" style="display:none">
      <input class="styled-input" name="contact[email]" placeholder=
      "your@email.com" required="required" style="float:left; width:100%;"
      type="email" value=""> <input name="contact[body]" type="hidden" value=
      "Please notify me when Moringa and Coconut Soap becomes available.">
      <input class="btn styled-submit" style="float:left;" type="submit" value=
      "Send">
    </div>
  </form>
</div>

JavaScript代碼：

jQuery('.notify-me').click(function() {
  alert('hello');
  jQuery($(this).parent().find('.notify-me-wrapper').fadeIn());           
  return false;
});

但是，我另一頁上針對一個項目的代碼可以正常工作：

jQuery('#notify-me').click(function() {

jQuery('#notify-me-wrapper').fadeIn();           

return false;
} );

Answer 1

.notify-me的父.notify-me是p元素，該元素不包含任何帶有calss notify-me-wrapper后代

您可能想使用closest ，那樣您可以搜索最確定的祖先，並確定該祖先包含具有notify-me-wrapper類的元素：

$(this).closest('.contact-form').find('.notify-me-wrapper').fadeIn()

jQuery.closest() ：

對於集合中的每個元素，通過測試元素本身並在DOM樹中遍歷其祖先，獲得與選擇器匹配的第一個元素。

Answer 2

.notify-me的父項是p標記（段落），而您要查找的元素是下一個同級項。 因此，更改：

jQuery($(this).parent().find('.notify-me-wrapper').fadeIn());    

與：

jQuery($(this).parent().next('.notify-me-wrapper').fadeIn());

用.next（）更改.find （） 。