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

提问者：小点点

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

我有以下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').最近的（“。row”）//我得到的父行

但是现在我想使用父行来子volumeInfo元素的值。所以我试着跟踪事情，但不工作。

$('.dimensionsInfo').closest（“。row”）。find（'.volumeInfo').val（）//不工作

在这种情况下如何访问相同的行元素？

共2个答案

匿名用户

当您编写$('.dimensionsInfo').closest（“。row”）时，您将不会获得具有id=“Product-Row-1”的行。实际得到的是最接近class=“row”的元素

若要选择所需的公共父行，应向其添加不同的类

<div class="row parent-row" id="product-row-1">

现在，要选择公共行

$('.dimensionsInfo').closest（“。parent-row”）；

并使用class=“VolumeInfo”查找输入元素的值

$('.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/