将 .each 数据写入具有相同 div id 的两个不同类答案

【问题标题】：Write .each data to two different classes with same div id将 .each 数据写入具有相同 div id 的两个不同类
【发布时间】：2015-11-12 05:41:07
【问题描述】：

我有一个 jQuery .each 循环遍历 div id，并将来自 AJAX 调用的 JSON 数据写入分配给类的输入。
大多数 div 只有一行要填充的输入，但有些有两行输入类。
所有的 div 和类都是动态创建的，但每个动态 div 都有自己的唯一 ID。

当.each 使用具有相同类的两行命中 div 时，它不会写入两行，而是使用数据库中的第二行写入类的第二行。
当用户使用两行中的数据写入数据库时，它会在数据库中创建一个单独的行。
一个用于徽章 1，一个用于徽章 2。
这是我的.each，它写了一行很棒的输入

$.each(data, function(i, item) {
    $("#" + item.full_op_id).find('.badge1').val(item.badge1);
    $("#" + item.full_op_id).find('.badge2').val(item.badge2);
    $("#" + item.full_op_id).find('.op_date').val(item.op_date);
    $("#" + item.full_op_id).find('.op_qty').val(item.op_qty);
});

我已经尝试了几件事，包括仅针对具有两行类的那些 id 的 if/else 语句。
我知道当.each 看到两行时，它基本上将其视为一行，因为它们具有相同的类名，除了 badge1/badge2。

我是否应该在 .each 中运行另一个循环来循环并为该 div id 和相同的输入类写入两行？如果是这样，我该怎么做？

应用背景：使用 Foundation 5 创建，使用来自一个数据库 (MSSQL) 的数据动态创建每个面板行，然后使用 AJAX/JSON 用户将其输入数据写入单独的数据库 (MYSQL)。
然后，用户应该能够再次启动作业，并通过从输入的 MYSQL 数据库中提取数据来查看他们所做的工作。
那是我在尝试将 JSON 数据插入每个 div 行和输入的输入时从中提取数据的数据库。

这是创建这两行的 HTML：

<div class="row" id="op_div_id">
  <div class="large-3 columns badge_div">
    <label>
      Operator 1 <span class="badge_required" style="font-size: 0.7em;">*required</span>
      <div class="row collapse">
        <div class="small-3 columns">
          <button class="button prefix radius badge_scan_button" onclick="badgeButton1($(this));">
          Scan
          </button>
        </div>
        <div class="small-9 columns">
          <input type="text" class="badge1" name="badge1" onchange="badgeColor1($(this));" placeholder="Badge Number">
          <input type="hidden" class="time_assigned" name="time_assigned" value="">
        </div>
      </div>
    </label>
  </div>
  <div class="large-3 columns date_div">
    <label>Today's Date <span class="date_required" style="font-size: 0.7em;">*required</span>
    <input type="text" class="op_date" name="op_date" onclick="popDate($(this));" placeholder="Today's Date">
    </label>
  </div>
  <div class="large-3 columns qty_div">
    <label>Quantity <span class="qty_required" style="font-size: 0.7em;">*required</span>
    <input type="text" class="op_qty" name="op_qty" onblur="opQtyColor($(this));" placeholder="Quantity">
    </label>
  </div>
  <div class="large-3 columns">
    <label>Complete Operation</label>
    <button class="button postfix save_op1" onclick="saveOp1($(this));">
    Save
    </button>
  </div>
</div>
<div class="row" id="op_div_id2">
  <div class="large-3 columns badge_div">
    <label>
      Operator 2 <span class="badge_required" style="font-size: 0.7em;">*required</span>
      <div class="row collapse">
        <div class="small-3 columns">
          <button class="button prefix radius badge_scan_button" onclick="badgeButton2($(this));">
          Scan
          </button>
        </div>
        <div class="small-9 columns">
          <input type="text" class="badge2" name="badge2" onchange="badgeColor2($(this));" placeholder="Badge Number">
          <input type="hidden" class="time_assigned" name="time_assigned" value="">
        </div>
      </div>
    </label>
  </div>
  <div class="large-3 columns date_div">
    <label>Today's Date <span class="date_required" style="font-size: 0.7em;">*required</span>
    <input type="text" class="op_date" name="op_date" onclick="popDate($(this));" placeholder="Today's Date">
    </label>
  </div>
  <div class="large-3 columns qty_div">
    <label>Quantity <span class="qty_required" style="font-size: 0.7em;">*required</span>
    <input type="text" class="op_qty" name="op_qty" onblur="opQtyColor($(this));" placeholder="Quantity">
    </label>
  </div>
  <div class="large-3 columns">
    <label>Complete Operation</label>
    <button class="button postfix save_op2" onclick="saveOp2($(this));">
    Save
    </button>
  </div>
</div>

【问题讨论】：

嘿，你能做一个 jsfiddle 并举例说明你尝试过的 If 语句吗？不需要第二个循环。看起来你很亲密。有点混乱..
顺便说一句，当结果相同时，使用 jQuery 选择器选择一次 ID 并重用它而不是 "#" + item.full_op_id 四次效率要高得多。示例：jsfiddle.net/pP8Zy/1
... 或简单地链接方法：jsfiddle.net/isherwood/pP8Zy/2
感谢@Jason，您的建议很有帮助，我将您的回复合并到下面的回答中。谢谢大家的建议！

标签： javascript jquery

【解决方案1】：

感谢大家对此的支持和帮助。我想出了一个效果很好的解决方案。感谢@Jason 提供的仅选择一次 ID 的提示。

         success: function (data) {

         var el;
         var done_row1 = false;
         $.each(data, function (i, item) {

             el = $("#" + item.full_op_id);

             if (item.full_op_id == "210-SUTB015" || item.full_op_id == "210-PICKA" || item.full_op_id == "44-SUTB015") {

                 if (done_row1 === false) {
                    el.find('div#op_div_id input.badge1').val(item.badge1);
                    el.find('div#op_div_id input.op_date').val(item.op_date);
                    el.find('div#op_div_id input.op_qty').val(item.op_qty);

                     done_row1 = true;

                 } else {

                    el.find('div#op_div_id2 input.badge2').val(item.badge2);
                    el.find('div#op_div_id2 input.op_date').val(item.op_date);
                    el.find('div#op_div_id2 input.op_qty').val(item.op_qty);
                     // reset row1 test
                     done_row1 = false;
                 }

             } else {
                el.find('div#op_div_id input.badge1').val(item.badge1);
                el.find('div#op_div_id input.op_date').val(item.op_date);
                el.find('div#op_div_id input.op_qty').val(item.op_qty);
             }

         });

     }

我工作的另一位开发人员帮助我完成了这个解决方案，所以我不能 100% 确定它正在做什么以使其工作，但确实如此。我们只是使用另一个 if/else 语句和 true/false 语句分离了徽章 1 和徽章 2 之间的行的写入。再次感谢大家！

【讨论】：

【解决方案2】：

我不确定我是否理解正确，但请尝试更改

$("#" + item.full_op_id).find('.badge1').val(item.badge1);

到

$("#" + item.full_op_id).find('.badge1').each(function() {
    $(this).val(item.badge1);
});

【讨论】：