获得第一个输入的值，从第四个开始

Question

我有四个输入元素

    <div class="TxtLeft" style="margin-bottom: 6px"> Screens </div>
    <input id='Quote_Screens_Quan_1' class='' type="Tiny" placeholder="Qty" >
    <input id='Quote_Screens_Desc_1' class='' type="Text" placeholder="Screen Description" >
    <input id='Quote_Screens_Unit_1' class='' type="CurrencySmallTextBox" placeholder="Unit Price " >
    <input id='Quote_Screens_Line_1' class='Rox' type="CurrencySmallTextBox" placeholder='Total' >

从第四个输入（Rox类）的键盘触发事件，我想要找到的是第一个输入的值。我可以使用下面的代码找到以前的值，但我不知何故需要指定一些要重新计算的元素。

$('.Rox').keyup(function() {    
    var x = $(this).prev().val() ; 
    // This gets me the value of 'Quote_Screens_Unit_1' but I need 'Quote_Screens_Quan_1'   
});

Answer 1

在同一父级中计算n个输入：

https://jsfiddle.net/n48hdqqc/

var countBack = 1;

$(".Rox").keyup(function() { 
    //Get the index of .Rox in relation to inputs only
    var thisIndex = $(this).index('input');

    //Store all inputs (including .Rox)
    var $inputs = $(this).parent().children('input');

    //Use .eq to target our desired element in the container
    var x = $inputs.eq(thisIndex-countBack).val();

    alert(x);
});

您可以操纵countBack来确定您想要退回多少元素。

这将在n之前查找.Rox兄弟输入。因此0将是.Rox的值，1将是Quote_Screens_Unit_1，2将是Quote_Screens_Desc_1，依此类推。

按父项中的出现获取输入：

var inputIndex = 1;

$(".Rox").keyup(function() { 

    //Store all inputs (including .Rox)
    var $inputs = $(this).parent().children('input');

    //Get specifically the second input in this container (index 1)
    var x = $inputs.eq(inputIndex).val();

    alert(x);
});

更改inputIndex以获取特定输入。请记住，.eq()索引从0开始，因此var inputIndex = 1;将获得第二个输入，依此类推。

获取第一个兄弟输入：

$(".Rox").keyup(function() { 
    var x = $(this).siblings().first().val();
    alert(x);
});

Answer 2

您可以使用siblings()和first()的组合来获取第一个输入的值：

$('.Rox').keyup(function() {    
    var x = $(this).siblings('input').first().val();
    console.log(x);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TxtLeft" style="margin-bottom: 6px"> Screens </div>
<input id='Quote_Screens_Quan_1' class='' type="Tiny" placeholder="Qty" >
<input id='Quote_Screens_Desc_1' class='' type="Text" placeholder="Screen Description" >
<input id='Quote_Screens_Unit_1' class='' type="CurrencySmallTextBox" placeholder="Unit Price " >
<input id='Quote_Screens_Line_1' class='Rox' type="CurrencySmallTextBox" placeholder='Total' >

Answer 3

这在很大程度上取决于您的整体标记，如果您有任何包含这些元素的包含元素（因为这样可以将您的查询封装到父容器中以避免定位错误的元素）。

考虑使用ID

根据定义，id属性是唯一的，因此您只需使用该属性始终定位特定输入即可轻松解决此问题：

$('.Rox').keyup(function() {    
    // This will always access your specific quantity
    var x = $('#Quote_Screens_Quan_1').val(); 
});

考虑定位兄弟

jQuery提供了一个siblings()函数，如果你想使用某个选择器访问一个特定的兄弟元素，这个函数很有用：

$('.Rox').keyup(function() {    
    // This will give you the first input sibling from this one
    var x = $(this).siblings('input:first').val();
});

这使用:first选择器来定位第一个元素，但是如果你需要另一个元素（即第二个，第三个等），你可以使用:eq(n)选择器通过索引访问该元素：

// This will give you the first input sibling from this one
var first = $(this).siblings('input:eq(0)').val();
var second = $(this).siblings('input:eq(1)').val();

Answer 4

一种选择是提供您尝试访问特定类或ID的输入，然后使用.siblings()或.prevUntil()

进行搜索

$(this).siblings('#Quote_Screens_Quan_1').val();
$(this).prevUntil('#Quote_Screens_Quan_1').val();