Hey there, thanks in advance for your help!
I'm wondering if I'm on the right track by using .closest and .find to extract values from the input field .cab.
The goal is to take those values and then show the appropriate door size in the DIV .cdmyour.
Is there a more efficient way to achieve this? I have around 20 rows to work with, so I'd prefer not to use IDs as it could result in unnecessary code.
$(document).ready(function() {
$(".cab").keyup(function() {
var parent = $(this).closest('.cdmrow');
var width = parent.find(".cdmcolhalf:eq(0)").val();
var height = parent.find(".cdmcolhalf:eq(1)").val();
var dwidth = parent.find(".cdmcolhalf:eq(2)").val();
var dheight = parent.find(".cdmcolhalf:eq(3)").val();
console.log(width);
console.log(height);
console.log(dwidth);
console.log(dheight);
})
}).cdmh1 {
text-align: center;
}
.cdmrow {
display: flex;
flex-direction: row;
text-align: center;
}
.cdmcol {
border-style: solid;
border-width: 1px;
width: 14.28%;
}
.cdmcol1 {
width: 14.28%;
}
.cdmcolmeas {
width: 57.14%;
}
.cdmyourord {
width: 28.58%;
}
.cdmcolhalf {
width: 7.142%;
border-style: solid;
border-width: .5px;
}
.cdmyour {
background-color: lightgrey;
}
.cab {
width: 50%;
text-align: center;
margin: 5%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="cdmh1">
About Your Space | Cabinet Door Measurements
</h1>
<div class="cdmtable">
<div class="cdmrow">
<div class="cdmcol1">
</div>
<div class="cdmcolmeas">
Your Cabinet's Measurements
</div>
<div class="cdmyourord cdmyour">
Your Order
</div>
</div>
<div class="cdmrow">
<div class="cdmcol">
</div>
<div class="cdmcol">
</div>
<div class="cdmcol">
</div>
<div class="cdmcol">
</div>
<div class="cdmcol">
</div>
<div class="cdmcol cdmyour">
Single Doors
</div>
<div class="cdmcol cdmyour">
Double Doors
</div>
</div>
<div class="cdmrow">
<div class="cdmcol">
</div>
<div class="cdmcol">
Opening Width (in)
</div>
<div class="cdmcol">
Opening Height (in)
</div>
<div class="cdmcol">
Reveal Between Double Doors (in)
</div>
<div class="cdmcol">
Desired Overlay (in)
</div>
<div class="cdmcolhalf cdmyour">
Width (in)
</div>
<div class="cdmcolhalf cdmyour">
Height (in)
</div>
<div class="cdmcolhalf cdmyour">
Width (in)
</div>
<div class="cdmcolhalf cdmyour">
Height (in)
</div>
</div>
<div class="cdmrow">
<div class="cdmcol">
Door 1
</div>
<div class="cdmcol">
<input class="cab" type="text">
</div>
<div class="cdmcol">
<input class="cab" type="text">
</div>
<div class="cdmcol">
<input class="cab" type="text">
</div>
<div class="cdmcol">
<input class="cab" type="text">
</div>
<div class="cdmcolhalf cdmyour">
</div>
<div class="cdmcolhalf cdmyour">
</div>
<div class="cdmcolhalf cdmyour">
</div>
<div class="cdmcolhalf cdmyour">
</div>
</div>
</div>
</div>