javascript - 尝试在两次迭代中提醒同一选择器的值，在第一次迭代中获得正确的值，在第二个迭代中获得错误的值。为什么？

Question

JSFiddle here.

在下面的SSCCE中，有两个.inner-table元素。我用过 JQuery each()遍历它们。然后在每个 .inner-table 里面，我遍历每个 <tr>找出并提醒 <input>.color-name 的值元素，通过使用 val()功能。

问题是在第一次迭代中，警报显示值 <input>.color-name显示我在文本字段中输入的正确值，但在第二次迭代中(即 第二次 inner-table )，无论我在文本字段中写入什么，警报似乎都显示空字符串。

问题是为什么？我做错了什么？

$(document).on("click", "#button", function(event) {
  //event.preventDefault();
  alert('Button clicked.'); //check
  var colorName;
  var dataJSON = {};

  $(".inner-table").each(function() {
    var dataUnit = [];
    dataJSON.dataUnit = dataUnit;
    var iterationCount = 1;
    
    $(this).find("tbody tr").each(function() {
      alert("Iteration " + iterationCount); //check
      //alert($(this).html());//check
      if ($(this).find("td .color-name").length) {
        colorName = $(this).find("td .color-name").val();
        alert(colorName); //check
      }
      iterationCount++;
    });

    var color = {
      "colorName": colorName
    };

    dataJSON.dataUnit.push(color);
  });

  console.log("dataJSON > " + JSON.stringify(dataJSON)); //check
});

.outer-table tr {
  margin: 30px;
}
.inner-table {
  border: 2px solid yellow;
  background-color: wheat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">
  Click
</button>
<table class="outer-table">
  <tbody>
    <tr>
      <td colspan="3">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>
                <p class="input-label">Name of Color</p>
                <input class="input-field color-name" type="text" />
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->
    <!-- ------------------------------------------------- -->
    <tr>
      <td colspan="3">
        <table class="inner-table">
          <tbody>
            <tr>
              <td>
                <p class="input-label">Name of Color</p>
                <input class="input-field colorName" type="text" />
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

你在第二个 td 中使用了错误的类名。你正在使用“colorName”它应该是“color-name”