Как изолировать jQuery each() от дочерних элементов родительского контейнера начального элемента
В приведенном ниже сценарии мне нужно изменить jQuery each(), чтобы вместо использования универсальных классов он начинался с целевого элемента, #customfield_11071, а затем сканировал до ближайшего родительского элемента "активной панели" (.active-pane#tab-5) и передает только входы дочерних элементов с class="text.long-field" каждому?
Я думал, что, передавая # tab-5 непосредственно каждому, он это сделает, но он выбирает поля ввода текста, соответствующие классу вне родительского контейнера tab-5, и добавляет их к итогу, что приводит к неправильным вычислениям.
jQuery(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
jQuery("#tab-5 input.text.long-field").each(function() {
jQuery(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
jQuery("#tab-5 input.text.long-field").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0 && this.id !== "customfield_11071") {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
jQuery("#customfield_11071").val(sum.toFixed(2));
}
HTML
<div class="tabs-pane active-pane" id="tab-5">
<div class="field-group">
<label for="customfield_12370">
Test Case Estimate
</label>
<input class="text long-field" id="customfield_12370" name="customfield_12370" type="text" value="">
<div class="description">
Will hold all QA estimates for Test Case preparation/creation efforts.
</div>
</div>
<div class="field-group">
<label for="customfield_12371">
Test Analysis Estimate
</label>
<input class="text long-field" id="customfield_12371" name="customfield_12371" type="text" value="">
<div class="description">
Will hold all QA estimates for testing analysis efforts.
</div>
</div>
<div class="field-group">
<label for="customfield_11071">
QA Estimate Total
</label>
<input class="text long-field" id="customfield_11071" name="customfield_11071" type="text" value="">
<div class="description">
Estimated LOE in Hours
</div>
</div>
</div>
ОБНОВЛЕНИЕ: Альтернативно, вместо того, чтобы передавать строку класса каждому, возможно, я могу заполнить определенную коллекцию идентификаторов в массив и передать это в each()?
1 ответ
Ваш скрипт отлично работает в изоляции. Смотрите http://jsfiddle.net/jEEKL/. Если вы получаете дополнительные поля с этим jQuery("#tab-5 input.text.long-field")
JQuery селектор, проверьте ваш источник для дубликатов идентификаторов вкладок.