访问jquery中设置的所有输入元素值属性答案

【问题标题】：Accessing all input elements value attribute set in jquery访问jquery中设置的所有输入元素值属性
【发布时间】：2020-02-11 19:10:37
【问题描述】：

我想访问所有具有 type="date" 和 date set 值的输入标签

let matchedelem = $('input[type="date"]').html();  
alert(matchedelem.length);

无论是否设置了日期，这都会作为所有输入元素发出警报

我的要求是我想选择所有设置了日期值的输入元素，如何修改 jquery 选择器？

let buttonsdiv;

function maintest() {
  constructTable();
  getDOMButtons();
}

function constructTable() {
  table = $('<table>');
  let row;
  let cell1;
  let cell2;
  let header2;

  table.attr({
    "id": "testTable"
  });


  row = $('<tr>');
  table.append(row);

  header2 = $('<th>').text("Feature");
  header3 = $('<th>');
  input = header3.text("Return Date/Time");
  header3.append(input);
  row.append(header2);
  row.append(header3);

  for (i = 0; i < 3; i++) {
    row = $('<tr>');
    table.append(row);


    cell1 = $('<td>').html("cell1");
    row.append(cell1);

    cell2 = $('<td>');
    row.append(cell2);

    input = $('<input>').attr({
      "type": "date",
      "id": "input" + i
    });
    cell2.append(input);
  }

  $("#mainDiv").append(table);
}


function getDOMButtons() {

  buttonsdiv = $("<div></div>").attr({
    "id": "buttonsdiv"
  });
  $("<button>Save</button>").attr({
      "value": "Save",
      "id": "saveButton"
    })
    .appendTo(buttonsdiv).click(function() {
      parseDOM();
    });

  $("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
  $(document).ready(function() {
    let divs = $('input[type="date"]');
    alert(divs.length);
  })
}

table {
  display: unset !important;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

【问题讨论】：

你能保留你的选择器，但在选择后做一个过滤器吗？如果是，那么也许这可以为您解决：$('input[type="date"]').filter((i,el) => el.value != "");

标签： javascript jquery html css

【解决方案1】：

试试这个：

$(function() {
  $('button').click(function() {
    $('body').find("input[type='date']").each(function(i) {
      console.log($(this).val());
    });
  });
});

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  #1 <input type="date" name="date1" /><br> #2 <input type="date" name="date2" /><br> #3 <input type="date" name="date3" /><br>
  <button>Submit!</button>
</body>

【讨论】：