It turns out that I have data formed as a table but I don't put it in table because it changes with divs jquery ( mainly adding and deleting these elements ) so it looks like this
The code with which I form this is this and it goes together with a jquery to obtain the data of all those inputs and selects. I leave you the executable so you can see how it looks and what happens when you press the button
$("#click").click(function() {
var columnas = [];
$('#columnas_excel').find('div').children().each(function() {
console.log($(this).children().val());
columnas.push($(this).children().val());
})
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<button id="click">Prueba</button>
<div class="card-body" id="columnas_excel">
<div class="col-sm-12 row">
<div class="form-group col-sm-3">
<input class="form-control" value="Nombre Generico1">
</div>
<div class="form-group col-sm-4" id="tablasName">
<select class="form-control" id="select_0" tabindex="-1">
<option value="">Seleccione Tabla</option>
<option value="tabla1">tabla1</option>
<option value="tabla2">tabla2</option>
<option value="tabla3">tabla3</option>
<option value="tabla4">tabla4</option>
<option value="tabla5">tabla5</option>
</select>
</div>
<div class="form-group col-sm-4">
<select class="form-control" id="select_1_1" tabindex="-1">
<option value="Columna1">Columna1</option>
<option value="Columna2">Columna2</option>
<option value="Columna3">Columna3</option>
<option value="Columna4">Columna4</option>
<option value="Columna5">Columna5</option>
<option value="Columna6">Columna6</option>
</select>
</div>
<div class="pl-3">
<button class="btn btn-danger" type="button" id="button_0">
<i class="fa fa-trash bigfonts"></i></button>
</div>
</div>
<div class="col-sm-12 row">
<div class="form-group col-sm-3">
<input class="form-control" value="Nombre Generico2">
</div>
<div class="form-group col-sm-4" id="tablasName">
<select class="form-control" id="select_1" tabindex="-1">
<option value="">Seleccione Tabla</option>
<option value="tabla1">tabla1</option>
<option value="tabla2">tabla2</option>
<option value="tabla3">tabla3</option>
<option value="tabla4">tabla4</option>
<option value="tabla5">tabla5</option>
</select>
</div>
<div class="form-group col-sm-4">
<select class="form-control" id="select_1_1" tabindex="-1">
<option value="Columna1">Columna1</option>
<option value="Columna2">Columna2</option>
<option value="Columna3">Columna3</option>
<option value="Columna4">Columna4</option>
<option value="Columna5">Columna5</option>
<option value="Columna6">Columna6</option>
</select>
</div>
<div class="pl-3">
<button class="btn btn-danger" type="button" id="button_1">
<i class="fa fa-trash bigfonts"></i>
</button>
</div>
</div>
<div class="col-sm-12 row">
<div class="form-group col-sm-3"><input class="form-control" value="Nombre Generico3"></div>
<div class="form-group col-sm-4" id="tablasName">
<select class="form-control" id="select_2" tabindex="-1">
<option value="">Seleccione Tabla</option>
<option value="tabla1">tabla1</option>
<option value="tabla2">tabla2</option>
<option value="tabla3">tabla3</option>
<option value="tabla4">tabla4</option>
<option value="tabla5">tabla5</option>
</select>
</div>
<div class="form-group col-sm-4">
<select class="form-control" id="select_1_1" tabindex="-1">
<option value="Columna1">Columna1</option>
<option value="Columna2">Columna2</option>
<option value="Columna3">Columna3</option>
<option value="Columna4">Columna4</option>
<option value="Columna5">Columna5</option>
<option value="Columna6">Columna6</option>
</select>
</div>
<div class="pl-3">
<button class="btn btn-danger" type="button" id="button_2">
<i class="fa fa-trash bigfonts"></i>
</button>
</div>
</div>
</div>What happens is that with this code it forms an unordered array and it takes data that I don't want, the data it forms for me is like this.
But what I want is to form them like this ( this is an example of how I want jquery to take them )
- Generic Name1
- Table2
- Column1
- "empty button field"
- Generic Name2
- Table3
- Column1
- "empty button field"
- Generic Name3
- Table4
- Column1
- "empty button field"
PS: I put a button for you to test how the console log shows it.
Instead of trying to find the
inputsyselectsin a convoluted way usingchildrendechildren, you could do:That way you're still traversing the DOM in order, but you're only interested in those tags.