访问jquery表单和a标记的父级

时间:2017-12-22 20:32:29

标签: javascript jquery

使用以下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代码不完整,因为它没有复制整个代码太大而是在循环内运行并以不同方式创建所有设置,请注意第一个具有

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

和课程为allloopedover

现在使用jQuery,我希望当我单击弹出窗口的提交按钮时,它应该传递div的id和数据项,我尝试使用最接近但是这似乎不起作用,任何理念?

1 个答案:

答案 0 :(得分:0)

当您将提交事件处理程序附加到表单时,处理函数中的$ git checkout 4075c99 $ git cherry-pick <changes you want> $ git push origin HEAD:refs/for/master 将是this本身,而不是您按下以提交表单的按钮(可能是某些表格内的form

因此,div将遍历$(this).closest的父母。如果form位于提交的表单中,div.allloopedover将无法找到它。如果您要查找的div位于表单中,则可以使用closest访问它。然后,您应该能够从$(this).find(".alloopedover")生成的jQuery对象中获取该div的iddata-item值。