写每个数据到两个不同的类与相同的div ID

Question

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

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

一行我已经试过几件事，包括上只是那些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> 

Answer 1

我不知道我理解正确的，但尝试改变

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

到

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

Answer 2

谢谢大家为您提供支持和帮助。我想出了一个很好的解决方案。感谢@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语句分隔了badge1和badge2之间的行的写入。再次感谢大家！