jQuery - найти другое значение дочернего элемента той же родительской строки

Question

У меня есть следующие HTML, которые динамически отображаются на странице несколько раз в соответствии с потребностями пользователя. Я просто хочу найти input:volume из input:length, чтобы я мог вычислить объем каждой строки.

простая концепция (от одного дочернего элемента , чтобы получить другого ребенка элемент с использованием родительского элемента строка )

от дочернего -> родительского -> дочернего

<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, потому что каждый идентификатор строки добавляется динамически по номеру, как я могу получить доступ к той же строке элемент в этой ситуации?

Answer 1

На самом деле вы получаете ближайшую строку, которая является просто родительским элементом Dimensionsinfo, а не всей родительской строкой, поэтому вы получаете undefined, есть много способов добиться этого:

Пожалуйста, посмотрите несколько способов ниже:

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 2

Когда вы напишете $('.dimensionsinfo').closest(".row"), вы не получите строку с id="product-row-1". Фактически вы получите ближайший элемент с class="row"

Чтобы выбрать желаемую общую родительскую строку, к ней нужно добавить другой класс.

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

Теперь, чтобы выбрать эту общую row

$('.dimensionsinfo').closest(".parent-row");

И чтобы найти значение элемента input с помощью class="volumeinfo"

$('.dimensionsinfo').closest(".parent-row").find('.volumeinfo').val();

Answer 3

Чтобы получить доступ к братьям и сестрам с помощью jQuery, вам потребуются два родительских метода и find.

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