Question

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

当.each用两个具有相同类的行命中div时，它不会写入两行，而是写入数据库中第二行的第二行类。
当用户使用来自两行的数据写入db时，它会在db中创建一个单独的行一个用于badge1，另一个用于badge2 这是我的.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);
});

我已经尝试了几个东西，包括if / else语句，只有那些带有两行类的id 据我所知，当.each看到两行时，它基本上将其视为一行，因为除了badge1 / badge2之外，它们具有相同的类名。

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

应用程序背景：使用Foundation 5创建，使用来自一个DB（MSSQL）的数据动态创建每个面板行，然后使用AJAX / JSON用户将其输入数据写入单独的DB（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>

Answer 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);
             }

         });

     }

我工作的另一位开发人员帮助我解决了这个问题，因此我并不是百分之百确定它是如何使其工作的，但确实如此。我们只是使用另一个if / else语句和true / false语句分隔出badge1和badge2之间的行的写入。再次感谢大家！

Answer 2

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

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

到

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

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

2 个答案: