文章/答案/技术大牛

发布

社区首页 >问答首页 >未由jquery生成的未知边距

问未由jquery生成的未知边距
EN

Stack Overflow用户

提问于 2015-10-08 09:49:43

回答 2查看 45关注 0票数 0

我正在尝试构建类似于这样的表单：

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

jquery

css

forms

回答 2

Stack Overflow用户

发布于 2015-10-08 09:59:35

您不会像原始的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>

票数 0

Stack Overflow用户

发布于 2015-10-08 11:28:34

添加默认样式
添加：.list-item:nth-of-type(n+3) input { margin-right: 5px; }
在<label>的文本中添加了额外的空格

$(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 + '&nbsp;</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);



  });
});

/* Default */

/*=-=-=-=-=-=-*/

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Tahoma';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
/*=-=-=-=-=-=-*/

/* Optional */

/*=-=-=-=-=-=-*/

#formbuilder > * {
  padding: 5px;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: -2px;
  margin-bottom: -2px;
}
input[type="button"] {
  padding: 0 2px;
}
/*=-=-=-=-=-=-*/

.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;
}
/* Required */

/*=-=-=-=-=-=-*/

.list-item:nth-of-type(n+3) input {
  margin-right: 5px;
}
/*=-=-=-=-=-=-*/

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33012278

复制

相似问题

问未由jquery生成的未知边距
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未由jquery生成的未知边距EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未由jquery生成的未知边距
EN