jqueryフォームとタグの親にアクセスする

Question

次のjQueryコードを使用します。

$('#trade-offer form').on("submit", function(event) { 
    event.preventDefault(); 
    var stock = $(this).closest('.allloopedover'); 
    console.log(stock); 
    return; 
    $.ajax({ 
     url: ajaxurl, 
     type: "POST", 
     dataType: 'json', 
     context: this, 
     data: $(this).serialize() + '&action=offer', 
     beforeSend: function() { 
      $('.alert-modal').remove(); 
      $(this).closest('form').find('input').removeClass('form-error'); 
      $(this).closest('form').find('.stm-ajax-loader').addClass('loading'); 
     }, 
     success: function(data) { 
      $(this).closest('form').find('.stm-ajax-loader').removeClass('loading'); 
      $(this).closest('form').find('.modal-body').append('<div class="alert-modal alert alert-' + data.status + ' text-left">' + data.response + '</div>') 
      for (var key in data.errors) { 
       $('#request-trade-offer-form input[name="' + key + '"]').addClass('form-error'); 
      } 
     } 
    }); 
    $(this).closest('form').find('.form-error').live('hover', function() { 
     $(this).removeClass('form-error'); 
    }); 
}); 

HTMLコード。

今

<div id="2012 FORD SUPER DUTY F-250 XLT" data-item="B01606" class="allloopedover listing-list-loop stm-listing-directory-list-loop stm-isotope-listing-item"> 
    <div class="image"> 
     <!--Video--> 
     <a href="http://x.com/listings/2012-ford-super-duty-f-250-xlt-2/" class="rmv_txt_drctn"> 
      <div class="image-inner"> 
       <!--Badge--> 
       <img width="300" height="225" src="http://x.com/blog/wp-content/uploads/2017/12/31-6-300x225.jpg" class="img-responsive wp-post-image" alt="" srcset="http://x.com/blog/wp-content/uploads/2017/12/31-6-300x225.jpg 300w, http://x.com/blog/wp-content/uploads/2017/12/31-6.jpg 640w" sizes="(max-width: 300px) 100vw, 300px"/> 
      </div> 
     </a> 
    </div> 
    <div class="content"> 
     <div class="meta-top"> 
      <!--Price--> 
      <div class="price offerc"> 
       <div class="normal-price"> 
        <span class="heading-font offercode"> 
         <a class="rmv_txt_drctn" href="#trade-offer" data-toggle="modal" data-itemname="2012 FORD SUPER DUTY F-250 XLT" data-target="#trade-offer">Offer</a> 
        </span> 
       </div> 
      </div> 
      <!--Title--> 
      <div class="title heading-font mmbot"> 
       <a href="http://x.com/listings/2012-ford-super-duty-f-250-xlt-2/" class="rmv_txt_drctn"> 
        2012 FORD SUPER DUTY F-250 XLT 
       </a> 
      </div> 
     </div> 
    </div> 

それはあまりにも大きいですが、それがループ内で実行され、異なったすべての設定を作成し、全体のコードをコピーしていなかったとして、

を持つ最初のdivに気づく完全ではありません divコード

id="2012 FORD SUPER DUTY F-250 XLT" data-item="B01606" 

およびクラスallloopedover。

jQueryの場合、ポップアップのサブミットボタンをクリックすると、そのIDとデータ項目を渡す必要があります。divを使用してみましたが、これは動作していないようです。フォームに提出するイベントハンドラをアタッチすると

Answer 1

、あなたのハンドラ関数の内部thisはform自体ではなく、あなたが（いくつかのdivフォーム内のかもしれない）フォームを送信するために押されたボタンになります。

したがって、$(this).closestはformの親を通過します。 div.allloopedoverが送信されているフォームの中にある場合、closestはそれを見つけられません。あなたが探しているdivがフォームの中にある場合は、$(this).find(".alloopedover")でアクセスすることができます。 によって得られたjQueryオブジェクトから、そのdivのidとdata-itemの値を取得できるはずです。