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事件时，我需要从{{1}获取文本}}字段。我会将其存储在数据模型中，但通过引用当前的串行字段，我应该能够遍历到部件号字段。

这是我尝试过的，当我的页面加载时我在串行字段上绑定了一个keyup事件，我将part number作为选择器传递，所以我引用了{{1}中的（sender）当前字段}：

this

然后在getData中，我希望能够将我的DOM结构遍历到当前getData()组，然后遍历到左侧div并从Part Number输入字段中获取值。

以下是我的尝试：

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

正如您所看到的，我在这里使用componentPair来查找与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 }类最接近的组件，在阅读jQuery文档后我相信这应该可行，但我得到console.log(elem.closest('input[class^="part"]'))功能错误。然后我尝试使用part选择器和undefined选择器，但每个选择器都抛出parent()函数错误。

如果我登录日志，parentsUntil()我得到：

undefined

这是我期望的，所以我不明白为什么我不能使用elem遍历<input type="text" class="serial" placeholder="SERIAL NUMBER">然后深入到树结构中来获取信息进行。

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

Answer 1

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

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

Answer 2

你得到未定义函数错误的原因是elem不是jQuery对象，它是一个HTMLElement，所以将它包装在$()中。

然后.closest()将无法按照您的想法运作，它只会搜索自己及其父母。

试试这个：

function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log($(elem).parent().siblings().find('input[class^="part"]'));
        serial = elem.value        
    }
}

$(document).on("keyup", '.serial', function() {getData(this, "SERIAL") });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

您对elem.closest('input[class^="part"]')有疑问，应该是$(elem).closest('input[class^="part"]')。因为elem是输入的object本身。所以你不能直接拨打closest()

以下是工作代码：

$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });
function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log($(elem).parent().parent().find('.part'));
        serial = $(elem).parent().parent().find('.part').val();
      alert(serial);
    }

   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

3 个答案: