javascript - jQuery，从div中的相邻输入获取文本

Question

我的页面上有一个组件，如下所示:

<div id="componentList">
    <div class="componentPair">
        <div class="left">
            <input type="text" class="part" placeholder="PART NUMBER">
        </div>
        <div class="right">
            <input type="text" class="serial" placeholder="SERIAL NUMBER">
        </div>
    </div>
</div>

组件列表可以嵌套多个组件对。在执行搜索时，如果零件号不存在，则无法查询序列号，因此在执行 keyup 时.serial 上的事件我需要从 part number 中获取文本的字段 field 。我会将其存储在数据模型中，但通过引用当前序列字段，我应该能够遍历到部件号字段。

这是我尝试过的方法，当我的页面加载时，我在串行字段上绑定(bind)了一个 keyup 事件，我传递了 this作为选择器，所以我引用了 getData() 中的(发件人)当前字段:

$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });

然后在 getData 中我希望能够遍历我的 DOM 结构到当前的 componentPair group 然后遍历到左边的 div 并从 Part Number 输入字段中获取值。

这是我尝试过的:

function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log(elem.closest('input[class^="part"]'))
        serial = elem.value
    }

    ... Other erroneous code to perform the search
}

如你所见，这里我使用console.log(elem.closest('input[class^="part"]'))找到类为 part 的最接近的组件，在阅读了 jQuery 文档后，我相信这应该可行，但我得到了一个 undefined功能错误。然后我尝试使用 parent()选择器和 parentsUntil()选择器，但他们每个人都扔了一个 undefined功能错误。

如果我控制台日志，elem我得到:

<input type="text" class="serial" placeholder="SERIAL NUMBER">

这是我所期望的，所以我不明白为什么我不能使用 elem.parent().parent()遍历到componentPair然后深入树结构以提取信息。

我正在使用 jQuery 1.11.3，非常感谢任何帮助。

Answer 1

问题是因为 .part 不是 .serial 的父级。您需要使用 closest() 找到共同的父元素，然后使用 find() 获取您需要的元素。试试这个:

var serial = $(elem).closest('.componentPair').find('.part').val();