How to iterate through specified div's non-direct input children

Question

I have multiple rows (DIVs), each with multiple child DIVs, each with a single INPUT. Each row also has a button that calls the code listed below.

The calling code is correct as the first alert() pops up.

I've tried both the initial $('input... , the following (function () {... and the following line $("'#" + dest..., but neither work. There is no subsequent alert(), which I'm expecting to iterate through each INPUT under the given main DIV.

function fnFinanceBudgetEditRecord(destDiv) {
  alert("fnFinanceBudgetEditRecord [" + destDiv + "]");

  $('input', $("'#" + destDiv + "'")).each(function () {
  //$('#' + destDiv + ' input').each(function () {
  //$("'#" + destDiv + "'").find('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
  });

}

EDIT: On a hunch, I've changed my existing naming scheme from BDGT_Description_[e59c6468-049f-11e9-9de4-d050996c3d53]_Field to BDGT_Description_e59c6468-049f-11e9-9de4-d050996c3d53_Field and code that wasn't working now is. So I'm going to rename all my IDs to exclude the square brackets.

Where am I going wrong? Note, all elements are unique.

Answer 1

如果为输入提供相同的类，则可以使用document.querySelectorAll()获得它们的值。像这样：

HTML

<div id="destDiv">
   <input class="destDivInput" type="text" />
   <input class="destDivInput" type="text" />
   <input class="destDivInput" type="text" />
</div>

JS

function fnFinanceBudgetEditRecord(destDiv) {
   var inputs = document.querySelectorAll('#' + destDiv + ' .destDivClass');
   inputs.forEach(function (input) {
      console.log(input.value);
      //
   });
}