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> 

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

以下是我已经试过了，当我的页面加载我绑定的串行领域的keyup事件，我通过this的选择，所以我必须在getData()参考（发件人）电流场：

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

然后在getData中，我希望能够将我的DOM结构遍历到当前的componentPair组，然后遍历到左边的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(); 

Answer 2

您有问题与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>

Answer 3

你得到了一个未定义功能错误是elem不是一个jQuery对象的原因，这是一个HTML元素，所以把它包装在$()。

然后.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>