Home / Questions / 159197
Accepted
Sebastián Lagos Yañez
Asked: 2020-04-26 10:50:21 +0800 CST 2020-04-26 10:50:21 +0800 CST

如何获取输入的值，用jquery选择divs里面？

  • 772

事实证明，我将数据形成为表格，但我没有将其放入表格中，因为它会随着 divs jquery 的变化（主要是添加和删除这些元素）而变化，所以它看起来像这样
在此处输入图像描述

我形成 this 的代码就是这个，它与 jquery 一起获取所有这些输入和选择的数据。我把可执行文件留给你，这样你就可以看到它的外观以及按下按钮时会发生什么

$("#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>

发生的情况是，使用这段代码，它形成了一个无序数组，它需要我不想要的数据，它为我形成的数据是这样的。
在此处输入图像描述

但我想要的是像这样形成它们（这是我希望 jquery 采用它们的一个例子）

  • 通用名称1
  • 表2
  • 第 1 列
  • “空按钮字段”
  • 通用名称2
  • 表3
  • 第 1 列
  • “空按钮字段”
  • 通用名称3
  • 表4
  • 第 1 列
  • “空按钮字段”

PS：我放了一个按钮供您测试控制台日志如何显示它。

jquery

1 Answers

  1. Best Answer

    与其尝试使用de以复杂的方式找到inputsy ，不如执行以下操作：selectschildrenchildren

    $('#columnas_excel').find('input, select, button').each(function() {
    ...
});

    这样你仍然按顺序遍历 DOM，但你只对那些标签感兴趣。

    $("#click").click(function() {
  var columnas = [];

  $('#columnas_excel').find('input, select, button').each(function() {
    console.log($(this).val());
    columnas.push($(this).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>

    • 3