JQuery以嵌套标记为目标

Question

大家好，这是我表格的标记

我正在尝试使用他们的类来定位textarea元素。这部分表单是动态创建的。

<div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                               {{ Form::label('product_name', 'Product Name') }}<span id="error-product_name"></span>
                               <div class="input-group">
                                   {{ Form::select('product_name[]',$products, null, ['class' => 'form-control required products-list product_name', 'placeholder'=>'--Select Product--',
                                    'data-msg-required'=>"Please select a product",'id'=>'product_name']) }}
                                    <i class="input-group-btn">
                                        {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#productModal']) }}
                                    </i>
                               </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                               {{ Form::label('product_category', 'Category') }}<span id="error-product_category"></span>
                               {{ Form::select('product_category[]',[], null, ['class' => 'form-control required categories product_category', 'placeholder'=>'--Select Category--',
                                'data-msg-required'=>"Please select a category",'id'=>'categories']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                               {{ Form::label('qty', 'Quantity') }}<span id="error-qty"></span>
                               <div class="input-group">
                                    {{ Form::text('qty[]', null, ['class' => 'form-control required qty','data-msg-required'=>"Please enter a quantity"]) }}
                                    <i class="input-group-btn">
                                        {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#aqlModal']) }}
                                    </i>
                               </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                               {{ Form::label('unit', 'Unit') }}<span id="error-unit"></span>
                                {{ Form::select('unit[]',[], null, ['class' => 'form-control required unit', 'placeholder'=>'--Select Unit--',
                                    'data-msg-required'=>"Please select a unit"]) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ Form::label('po_no', 'PO Number') }}<span id="error-po_no"></span>
                                {{ Form::text('po_no[]', null, ['class' => 'form-control required po_no','data-msg-required'=>"Please enter the PO Number"]) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('cmf', 'Color/Material/Finish') }}<span id="error-cmf"></span>
                                {{ Form::textarea('cmf[]', null, ['class' => 'form-control cmf','rows'=>'2']) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('shipping_mark', 'Shipping Mark') }}<span id="error-shipping_mark"></span>
                                {{ Form::textarea('shipping_mark[]', null, ['class' => 'form-control shipping_mark','rows'=>'2']) }}
                            </div>
                        </div>
                        <div class="col-md-6">
                             <div class="form-group">
                                {{ Form::label('brand', 'Brand') }}<span id="error-brand"></span>
                                {{ Form::text('brand[]', null, ['class' => 'form-control required brand','data-msg-required'=>"Please enter the product brand"]) }}
                            </div>

                            <div class="form-group">
                                {{ Form::label('tech_specs', 'Technical Specifications/Rating') }}<span id="error-tech_specs"></span>
                                {{ Form::textarea('tech_specs[]', null, ['class' => 'form-control tech_specs','rows'=>'2']) }}
                            </div>
                            <div class="form-group">
                                {{ Form::label('additional_info', 'Additional Information') }}<span id="error-additional_info"></span>
                                {{ Form::textarea('additional_info[]', null, ['class' => 'form-control additional_info','rows'=>'2']) }}
                            </div>
                        </div>
                    </div>
              </div>

我试图从我的ajax调用中的json响应中填充所有这些字段..每当我尝试使用类直接定位元素时...所有具有相同类的附加元素都填充相同的值。我只希望从我的ajax调用中填充最接近的元素。

这是我的javascript代码

$('body').on('change','.product_name', function(){
    var product_id = $(this).find('option:selected').val();
    $.ajax({
        url : selectproduct,
        type: 'POST',
        data:{
          _token : token,
          product_id : product_id
        },
        beforeSend: function(){
          console.log('loading');
        },
        success: function(response){
          console.log(response);
            $(this).next('.row').find('.shipping_mark').val(response.product.shipping_mark);
        }
    });
  });

Answer 1

ajax成功中的

this指的是另一个对象。您需要将原始引用保存在变量中。

$('body').on('change','.product_name', function(){
    var product_id = $(this).find('option:selected').val();
    var self = this; // save reference in a variable
    $.ajax({
        url : selectproduct,
        type: 'POST',
        data:{
          _token : token,
          product_id : product_id
        },
        beforeSend: function(){
          console.log('loading');
        },
        success: function(response){
          console.log(response);//Use the saved reference in next line
            $(self).next('.row').find('.shipping_mark').val(response.product.shipping_mark);
        }
    });
  });

Refer here了解有关此问题的更多选项。