Get div input childs value
Question
I'm tryin to get the value from the three inputs containd on a group of divs but only th edivs that doesn't belongs to invisible-age-range-row
<div class="row">
<div class="col-md-7 col-xs-12 dist-element-row">
<label>Franjas de edad</label>
<div class="row age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from" value="1">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to" value="2">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage" value="20">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from" value="3">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to" value="4">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage" value="5">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
<div class="row age-range-row invisible-age-range-row">
<div class="col-md-2">
<label>Desde</label>
<input type="number" min="0" class="form-control from">
</div>
<div class="col-md-2">
<label>Hasta</label>
<input type="number" min="0" class="form-control to">
</div>
<div class="col-md-2">
<label>%</label>
<input type="number" min="0" max="100" class="form-control percentage">
</div>
<div class="col-md-6 options-cell">
<button class="btn btn-primary add-range">+</button>
<button class="btn btn-default delete-range">-</button>
</div>
</div>
</div>
</div>
I'm getting the divs this way
var ranges = $('.age-range-row').not('.invisible-age-range-row');
but I can't access the input value this way :
ranges.each(function(range) {
var elements = [];
console.log(range);
elements.push(range.find('.from'));
elements.push(range.find('.to'));
elements.push(range.find('.percentage'));
stored_ranges.push(elements);
});
4 answers
solution1
1 ACCPTED 2019-04-26 07:22:10
First argument of each function refers to index of element. You need to use range as second element to use as element selector:
ranges.each(function(index,range){
var elements = [];
console.log(range);
elements.push(range.find('.from'));
elements.push(range.find('.to'));
elements.push(range.find('.percentage'));
stored_ranges.push(elements);
});
solution2
0 2019-04-26 07:27:08
You should remember each has 2 parameter.
Use $(range) instead of range only.
var ranges = $('.age-range-row').not('.invisible-age-range-row');
ranges.each(function(index, range){
if(!$(this).hasClass('invisible-age-range-row')){
var elements = [];
console.log(range);
elements.push($(range).find('.from'));
elements.push($(range).find('.to'));
elements.push($(range).find('.percentage'));
//stored_ranges.push(elements);
}
});
var ranges = $('.age-range-row').not('.invisible-age-range-row'); ranges.each(function(index, range){ if(!$(this).hasClass('invisible-age-range-row')){ var elements = []; console.log(range); elements.push($(range).find('.from')); elements.push($(range).find('.to')); elements.push($(range).find('.percentage')); //stored_ranges.push(elements); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-7 col-xs-12 dist-element-row"> <label>Franjas de edad</label> <div class="row age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="1"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="2"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="20"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="3"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="4"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="5"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div> </div> </div>
solution3
0 2019-04-26 07:33:55
Use hasClass to check if class invisible-age-range-row exist and val() to get input value,hope this helps
(or) Using not
var ranges = $('.age-range-row').not('.invisible-age-range-row')
ranges.each(function(e){
var elements = [];
elements.push($(this).find('.from').val());
var ranges = $('.age-range-row'); var stored_ranges=[]; ranges.each(function(e){ var elements = []; if(!$(this).hasClass('invisible-age-range-row')){ elements.push($(this).find('.from').val()); elements.push($(this).find('.to').val()); elements.push($(this).find('.percentage').val()); stored_ranges.push(elements); } }); console.log(stored_ranges)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="row"> <div class="col-md-7 col-xs-12 dist-element-row"> <label>Franjas de edad</label> <div class="row age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="1"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="2"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="20"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="3"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="4"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="5"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div> </div> </div>
solution4
0 2019-04-26 07:35:37
$('.age-range-row').not('.invisible-age-range-row').each(function(index, range){ //if(!$(this).hasClass('invisible-age-range-row')){ var elements = []; console.log(range); elements.push($(range).find('.from')); elements.push($(range).find('.to')); elements.push($(range).find('.percentage')); //stored_ranges.push(elements); //} });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-7 col-xs-12 dist-element-row"> <label>Franjas de edad</label> <div class="row age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="1"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="2"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="20"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from" value="3"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to" value="4"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage" value="5"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div><div class="row age-range-row invisible-age-range-row"><div class="col-md-2"> <label>Desde</label> <input type="number" min="0" class="form-control from"> </div> <div class="col-md-2"> <label>Hasta</label> <input type="number" min="0" class="form-control to"> </div> <div class="col-md-2"> <label>%</label> <input type="number" min="0" max="100" class="form-control percentage"> </div> <div class="col-md-6 options-cell"> <button class="btn btn-primary add-range">+</button> <button class="btn btn-default delete-range">-</button> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript get the value of input in a div
Undefined error getting parents childs input value
Get value of property from an array of objects with childs
How to get innerText of div with input value in react?
Get value Input Hidden inside div
How to set / get div input tag value?
Get text value from one div to input
How to assign value from select option elements to another div childs
Get all childs od childs of (…) childs of parentNode
how do i get div childs from jquery/javascript in this example?
Related Tags