jQuery - получить значение ближайшего текстового поля и присвоить его переменной

Question

Как я могу получить значение ближайшего текстового поля и назначить его переменной? Затем после получения значения измените текущее значение этого текстового поля, умножив его на значение предыдущего текстового поля. У меня есть три экземпляра div с теми же элементами ввода, поэтому я думаю, что .closest() или .next() могут мне помочь. Вот отрывок из моего кода

HTML

<div class="box"> 
    <b>1</b> 
    <input type="text" name="quantity" value="1"/> 
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/> 
    <input type="text" name="price" value="10"/> 
</div> 

<div class="box"> 
    <b>2</b> 
    <input type="text" name="quantity" value="1"/> 
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/> 
    <input type="text" name="price" value="10"/> 
</div> 

<div class="box"> 
    <b>3</b> 
    <input type="text" name="quantity" value="1"/> 
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/> 
    <input type="text" name="price" value="10"/> 
</div> 

JS

$("input[name=quantity]").each(function(){ 
    $(this).bind("change keyup", function(){ 
     var q = $(this).val(); 
     var p = parseFloat($(this).closest("input[name=price]").val()).toFixed(2); 
     var amount = q * p; 
     $(this).closest("input[name=price]").val(amount) 
     console.log(amount); 
    }) 
}) 

неработающего демо

http://jsfiddle.net/c6yfS/

Спасибо за ответы

/* ПРИМЕЧАНИЕ */

Цель этого флажка - показать, что у меня есть флажок между этими двумя элементами.

Answer 1

Как упоминалось на других плакатах, вы можете использовать .siblings как .closest поиск по дереву DOM (т. родительские элементы). Однако в вашем коде есть также логическая ошибка, так как цена, которую вы получаете, никогда не является правильной ценой за единицу, если количество изменено.Вам потребуется отдельная цена за единицу скрытое значение может быть, чтобы облегчить этот

Отъезд обновленный код здесь: http://jsfiddle.net/c6yfS/1/

Answer 2

.closest Используется для поиска ближайшего элемента до дерева DOM. Что вы ищете? siblings или next | prev.

http://api.jquery.com/siblings/

http://api.jquery.com/prev/

http://api.jquery.com/next/

Так

$(this).siblings("input[name='price']").val(amount); 

Редактировать

Вот й е полный рабочий JS:

$("input[name=quantity]").each(function(){ 
    $(this).bind("change keyup", function(){ 
     var $thi,q,$p,p; 
     $thi = $(this); 
     q = $thi.val(); 
     $p = $(this).siblings("input[name='price']"); 
     p = parseFloat($p.val()).toFixed(2); 
     $p.val(q * p); 
    }); 
}); 

Answer 3

это лучше использовать data атрибут для того, чтобы вычисления правильно:

HTML:

<div class="box"> 
    <b>1</b> 
    <input type="text" name="quantity" value="1"/> 
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/> 
    <input type="text" name="price" data-value="10"/> 
</div> 

JS:

$('input[name=quantity]').on("change keyup", function(){ 
     var q = 0; 
     var p = 0; 
     var amount = 0; 
     q = parseInt($(this).val(), 10); 
     p = parseInt($(this).siblings("input[name='price']").data('value'), 10); 
     amount = q * p; 
     if (amount) { 
      $(this).siblings("input[name='price']").val(amount) 
     console.log(amount); 
     } else { 
      $(this).siblings("input[name='price']").val('Please specify the quantity')   
     } 
}) 

DEMO

Answer 4

для ясности я просто добавить общее поле Вы можете решить с помощью этого кода:

$ ("input [name = количество], input [name = price]") .each (function() {$ (this) .on ({'keyup': function() {var j0 = $ (this) .nextAll ("input [name = total]"); j0.val (j0.prevAll ("input [name = quantity]"). val() * j0.prevAll ("input [name = price]"). val())}})});

Click here to see the working "Fiddle"