jQuery - 查找同一父行的另一个子元素值

Question

我有以下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 都是按数字动态添加的，在这种情况下如何访问相同的行元素？

Answer 1

当你写$('.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();

Answer 2

实际上，您正在获得最接近的行，它只是 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/

Answer 3

要使用 jQuery 访问同级，您需要两个方法 parent 和 find。

let parent=$(".dimensionsinfo').parent(); //access parent
let sibling=$(parent).find(".volumeinfo"); //find children 
let val=$(sibling).val(); //get child value