CODEWITHSUNDEEP
javascripthtmljquery
Devang Hingu
Devang Hingu

Reputation: 628

jQuery - find another child element value of same parent row

I have following HTML which render on page dynamically multiples times as per user needs. i just want to find input:volume from input:length so i can calculate each row volume.

simple concept (from one child to get another child element using parent row )

from child --> parent --> child

<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>

Right now i got parent row using

$('.dimensionsinfo').closest(".row") //parent row i got

But now i want to child volumeinfo element's value using that parent row. so i tried following things but not working.

$('.dimensionsinfo').closest(".row").find('.volumeinfo').val() //not working

i cannot use product-row-1 because each row id added dynamically by number how can i access same row element on this situation?

Upvotes: 1

Views: 569

Answers (3)

Pranay kumar
Pranay kumar

Reputation: 2197

To access siblings using jQuery, you require two method parents and find.


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

Upvotes: 0

maverickosama92
maverickosama92

Reputation: 2725

Actually you are getting closest row which is just a parent of dimensionsinfo not the whole row's parent so you are getting undefined, there are many ways we can achieve that:

Please see below couple of ways:

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/

Upvotes: 1

Prakhar
Prakhar

Reputation: 1485

When you write $('.dimensionsinfo').closest(".row") , you will not get the row with id="product-row-1". What you will actually get is the closest element with class="row"

To select the desired common parent row, a different class should be added to it

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

Now, to select that common row

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

And to find the value of input element with class="volumeinfo"

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

Upvotes: 1

Related Questions