jquery - 不是由 jquery 生成时的未知边距

Question

我正在尝试构建类似这种形式的东西:

https://jsfiddle.net/zycyuyrz/

问题是，即使 html 行的 html 代码和 jquery 生成的 html 行相同，它们看起来也不同。有人知道这是怎么回事吗？

html:

<div class="container">
    <fieldset id="formbuilder">
        <legend>Shopping list</legend>

        <p>Some text with some more text, describing the multiple shopping list.</p>

        <div class="form-container" id="form-container">

            <div class="list-item" id="list-item-1">
                <label class="sku-label" for="sku-1">SKU - 1</label>
                <input class="sku-input" type="text" id="sku-1" name="sku1" />
                <label class="qty-label" for="q-1">Qty</label>
                <input class="qty-input" type="text" id="q-1" name="q1" />
                <input class="btn-ver" type="button" name="verify1" value="Verify if available" />
                <input class="btn-rem" type="button" name="remove1" value="Remove (-)" />
            </div>

            <div class="list-item" id="list-item-2">
                <label class="sku-label" for="sku-2">SKU - 2</label>
                <input class="sku-input" type="text" id="sku-2" name="sku2" />
                <label class="qty-label" for="q-2">Qty</label>
                <input class="qty-input" type="text" id="q-2" name="q2" />
                <input class="btn-ver" type="button" name="verify2" value="Verify if available" />
                <input class="btn-rem" type="button" name="remove2" value="Remove (-)" />
            </div>

        </div>

    </fieldset>
        <input type="button" value="Send all to cart" class="btm-btn" id="send-to-cart" />
        <input type="button" value="Add new product (+)" class="btm-btn" id="add" />

</div>

js:

$(document).ready(function(){
    $('#add').click(function(){
        var intId = $('#form-container .list-item').length + 1;
        var fWrapper = $("<div class=\"list-item\" id=\"list-item-" + intId + "\"></div>");

        var fLabelSku = $("<label class=\"sku-label\" for=\"sku-" + intId + "\">SKU - " + intId + "</label>");
        var fInputSku = $("<input class=\"sku-input\" type=\"text\" id=\"sku-" + intId + "\" name=\"sku" + intId + "\" />");
        var fLabelQty = $("<label class=\"qty-label\" for=\"q-" + intId + "\">Qty</label>");
        var fInputQty = $("<input class=\"qty-input\" type=\"text\" id=\"q-" + intId + "\" name=\"q" + intId + "\" />");
        var fBtnVerify = $("<input class=\"btn-ver\" type=\"button\" name=\"verify" + intId + "\" value=\"Verify if available\" />");
        var fBtnRemove = $("<input class=\"btn-rem\" type=\"button\" name=\"remove" + intId + "\" value=\"Remove (-)\" />");


        fWrapper.append(fLabelSku);
        fWrapper.append(fInputSku);
        fWrapper.append(fLabelQty);
        fWrapper.append(fInputQty);
        fWrapper.append(fBtnVerify);
        fWrapper.append(fBtnRemove);

        $('#form-container').append(fWrapper);



    });
});

CSS:

.container {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 60px;
}

.btm-btn {
    float: right;
    margin-top: 10px;
    margin-left: 10px;
}

.qty-input {
    width: 30px;
}

.list-item {
    margin-bottom: 10px;
}

Answer 1

您没有像在原始 HTML 中那样在 jQuery 代码中的元素之间添加任何间距。将 fWrapper.append(""); 放在元素之间。

$(document).ready(function() {
  $('#add').click(function() {
    var intId = $('#form-container .list-item').length + 1;
    var fWrapper = $("<div class=\"list-item\" id=\"list-item-" + intId + "\"></div>");

    var fLabelSku = $("<label class=\"sku-label\" for=\"sku-" + intId + "\">SKU - " + intId + "</label>");
    var fInputSku = $("<input class=\"sku-input\" type=\"text\" id=\"sku-" + intId + "\" name=\"sku" + intId + "\" />");
    var fLabelQty = $("<label class=\"qty-label\" for=\"q-" + intId + "\">Qty</label>");
    var fInputQty = $("<input class=\"qty-input\" type=\"text\" id=\"q-" + intId + "\" name=\"q" + intId + "\" />");
    var fBtnVerify = $("<input class=\"btn-ver\" type=\"button\" name=\"verify" + intId + "\" value=\"Verify if available\" />");
    var fBtnRemove = $("<input class=\"btn-rem\" type=\"button\" name=\"remove" + intId + "\" value=\"Remove (-)\" />");


    fWrapper.append(fLabelSku);
    fWrapper.append(" ");
    fWrapper.append(fInputSku);
    fWrapper.append(" ");
    fWrapper.append(fLabelQty);
    fWrapper.append(" ");
    fWrapper.append(fInputQty);
    fWrapper.append(" ");
    fWrapper.append(fBtnVerify);
    fWrapper.append(" ");
    fWrapper.append(fBtnRemove);

    $('#form-container').append(fWrapper);



  });
});

.container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 60px;
}
.btm-btn {
  float: right;
  margin-top: 10px;
  margin-left: 10px;
}
.qty-input {
  width: 30px;
}
.list-item {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <fieldset id="formbuilder">
    <legend>Shopping list</legend>

    <p>Some text with some more text, describing the multiple shopping list.</p>

    <div class="form-container" id="form-container">

      <div class="list-item" id="list-item-1">
        <label class="sku-label" for="sku-1">SKU - 1</label>
        <input class="sku-input" type="text" id="sku-1" name="sku1" />
        <label class="qty-label" for="q-1">Qty</label>
        <input class="qty-input" type="text" id="q-1" name="q1" />
        <input class="btn-ver" type="button" name="verify1" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove1" value="Remove (-)" />
      </div>

      <div class="list-item" id="list-item-2">
        <label class="sku-label" for="sku-2">SKU - 2</label>
        <input class="sku-input" type="text" id="sku-2" name="sku2" />
        <label class="qty-label" for="q-2">Qty</label>
        <input class="qty-input" type="text" id="q-2" name="q2" />
        <input class="btn-ver" type="button" name="verify2" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove2" value="Remove (-)" />
      </div>

    </div>

  </fieldset>
  <input type="button" value="Send all to cart" class="btm-btn" id="send-to-cart" />
  <input type="button" value="Add new product (+)" class="btm-btn" id="add" />

</div>