How do you traverse the DOM from within a widget, using jQuery?

I’m using jquery UI’s autocomplete widget. How do I get the current element’s sister tag? For example, I have 2 elements in question: One has a class “product_name” and the other has a class “qty”. I’m trying to get the element with a class of “qty”, under the parent div “form_field_wrapper” only.

<div class="col-sm-10 form_field_wrapper">
    <input class="form-control autocomplete_inventory product_name" name="product[]" type="text">
</div>
<label class="col-sm-2 col-form-label">Qty</label>
<div class="col-sm-10 form_field_wrapper">
    <input class="form-control qty" type="number" name="qty[]"  min="0">
</div>

In a normal situation, I would use this:

$('.product_name').change(function(){
    var obj = $(this);
    $(obj).closest('.form_field_wrapper').nextAll(':has(.qty):first').find('.qty');
});

But since I’m trying to find the obj inside the autocomplete widget, trying to use $(this) gives an error.

Below I’ve got a working example of changing the value of an input field with the class of “qty” based on the user’s selection.

$(".autocomplete_inventory").autocomplete({
        source: javascript_array,
        select: function (event, ui) {
            var tag = ui.item.value;
            var sku_code = tag;

            var series = JSON.parse(sales_list); //external JSON file with information on current selection
            $(series).each(function(index, value){
                if(value.inventory_id == sku_code){
                    price = value.sales_price;
                    max_qty = value.qty;
                    $(".qty").attr("max", max_qty);
                }
            });
        }
    });

But, of course, this will change the value of ALL elements with the class of “qty”.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.