选择事件的下一个输入 [英] Selecting the next input of an event.target

问题描述

我有两个输入product和category(一个数组).

I have (an array of) two inputs product and category.

产品之一是自动完成的. 选择产品后，我想填写类别.

The product one is an autocomplete. I would like to fill in the category when a product is selected.

event.target不是jquery对象的问题，因此看来我无法应用jQquery的.next("input")

the problem that the event.target is not a jquery object, so it seems I can't apply the jQquery's .next("input")

这是我的代码:

var addedProduct = $(".produit:last > input");
addedProduct.autocomplete( {
        source: Object.keys(availableProducts),
        select: function(event, ui){
            var category = event.target.next("input"); // something like this ???
            category.value = availableProducts[ui.item.value]; //{"product1":"category1",...}
        }
    })

输入位置如下:

推荐答案

您可以使用$(event.target)从事件目标创建新的jQuery对象.之后您可以在其上调用.next

You can create a new jQuery object from the event target with $(event.target). You'll be able to call .next on it afterwards

没有jQuery的另一种解决方案是使用本机DOM API.您可以使用 nextElementSibling 选择下一个元素.唯一的要求是您要定位的元素必须立即成为下一个元素.

The other solution without jQuery is to use the native DOM API. You can select the next element with nextElementSibling. The only requirement is that the element you want to target must be immediately the next element.

编辑:在提供的DOM结构中，您可以使用.parent().next()选择父级的下一个元素.然后在这个新元素上，使用.find()选择所需的输入.请注意，代码与DOM结构紧密相关.您可以使用id直接选择元素.

EDIT: From the DOM structure provided you can use .parent().next() to select the next element at the parent level. Then on this new element use .find() to select the wanted input. Note that the code is highly tied to the DOM structure. You could use the id to directly select the element.

$(event.target).parent().next().find("input");

这篇关于选择事件的下一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！