![](/img/trans.png)
[英]How to get child element of another child of the same parent with jQuery/JS
[英]jQuery - find another child element value of same parent row
我有以下HTML根據用戶需要在頁面上動態呈現多次。 我只想從input:length
中找到input:volume
,這樣我就可以計算每一行的音量。
簡單的概念(從一個子元素到使用父行獲取另一個子元素)
從孩子 --> 父母 --> 孩子
<div class="row" id="product-row-1">
<div class="col-md-2 form-group">
<label for="product-qty-1"><span class="text-danger">*</span></label>
<input type="number" min="1" id="product-qty-1" name="quantity-1" class="form-control">
</div>
<div class="col-md-2 form-group">
<label for="product-weight-1"><span class="text-danger">*</span></label>
<input type="number" min="0" step="0.01" id="product-weight-1" name="product-weight-1" class="form-control" max="">
</div>
<div class="col-md-3 form-group dimensions">
<label for="product-dimensions-length-1"><span class="text-danger">*</span></label>
<div class="row">
<div class="col-4"><input type="number" min="0" class="form-control dimensionsinfo" max="" step="0.01" id="product-dimensions-length-1" name="product-dimensions-length-1"></div>
<div class="col-4"><input type="number" min="0" class="form-control dimensionsinfo" max="" step="0.01" id="product-dimensions-width-1" name="product-dimensions-width-1"></div>
<div class="col-4"><input type="number" min="0" class="form-control dimensionsinfo" max="" step="0.01" id="product-dimensions-height-1" name="product-dimensions-height-1"></div>
</div>
</div>
<div class="col-md-2 form-group">
<label for="product-volume-1"><span class="text-danger">*</span></label>
<input type="number" id="product-volume-1" step="0.01" name="volume-1" min="0" max="" class="form-control volumeinfo">
</div>
</div>
現在我得到了父行使用
$('.dimensionsinfo').closest(".row") //parent row i got
但是現在我想使用該父行來生成volumeinfo
元素的值。 所以我嘗試了以下事情但沒有工作。
$('.dimensionsinfo').closest(".row").find('.volumeinfo').val() //not working
我不能使用product-row-1
因為每個行 id 都是按數字動態添加的,在這種情況下如何訪問相同的行元素?
當你寫$('.dimensionsinfo').closest(".row")
時,你不會得到id="product-row-1"
。 您實際上將得到的是與class="row"
最接近的元素
對於 select 所需的公共父行,應向其添加不同的 class
<div class="row parent-row" id="product-row-1">
現在,到 select 那個常見的行
$('.dimensionsinfo').closest(".parent-row");
並使用class="volumeinfo"
查找input
元素的值
$('.dimensionsinfo').closest(".parent-row").find('.volumeinfo').val();
實際上,您正在獲得最接近的行,它只是 dimensionsinfo 的父行,而不是整行的父行,因此您變得未定義,我們可以通過多種方式實現這一目標:
請看以下幾種方式:
console.log($('.dimensionsinfo').parents("#product-row-1").find('.volumeinfo').val());
console.log($('.dimensionsinfo').closest("#product-row-1").find('.volumeinfo').val());
console.log($('.dimensionsinfo').closest(".dimensions").next().find('.volumeinfo').val());
jsfiddle: https://jsfiddle.net/pd6bcjtx/1/
要使用 jQuery 訪問同級,您需要兩個方法 parent 和 find。
let parent=$(".dimensionsinfo').parent(); //access parent
let sibling=$(parent).find(".volumeinfo"); //find children
let val=$(sibling).val(); //get child value
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.