javascript - 通过 jQuery 附加的 HTML 不接收边距

Question

我有一个普通的 HTML 页面，其中包含一些彼此之间有一点边距的框:

当用户向下滚动时，页面会自动通过 AJAX 加载更多图像并向页面附加更多框，但它们相互粘在一起:

它们实际上具有相同的 HTML，它们不应该看起来像那样。这是页面直接附带的框的 HTML:

<div class="images inner">
{% for image in S_IMAGES %}
<span class="image{% if loop.last %} last-box{% endif %}">
    <div class="close" aria-hidden="true">&times;</div>
    <section class="row">

            <div class="col-lg-12 center upload-output">
                <br /><br />

                <div class="img-container">
                    <div class="helper"></div>
                    <a href="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="lightview" data-lightview-group="images">
                        <img src="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" class="img-thumbnail">
                    </a>
                </div>
            </div>

    </section>
    <hr />
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_WEB_PATH }}image/{{ image.image_name }}" readonly>
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_IMAGES_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly>
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" onclick="this.select();" value="{{ S_THUMBS_PATH }}{{ image.image_name }}.{{ image.image_extension }}" readonly>
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>
{% else %}

{% endfor %}
</div>

这就是我使用 jQuery 附加附加框的方式:

for (var key in response.images) 
{
    var image = response.images[key];

    var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box' : '') + '">';
    imageHTML += '<div class="close" aria-hidden="true">&times;</div>';
    imageHTML += '<section class="row">';
    imageHTML += '<div class="col-lg-12 center upload-output">';
    imageHTML += '<br /><br />';
    imageHTML += '<div class="img-container">';
    imageHTML += '<div class="helper"></div>';
    imageHTML += '<a href="' + generate_site_url() + 'store/i/' + image.image_name + '.' + 
                  image.image_extension + '" class="lightview">';
    imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + 
                  image.image_extension + '" class="img-thumbnail" />';
    imageHTML += '</a>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</section>';
    imageHTML += '<hr />';
    imageHTML += '<div role="form">';
    imageHTML += '<div class="form-group">';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'image/' + image.image_name + '" readonly>';
    imageHTML += '<span class="input-group-addon">View</span>';
    imageHTML += '</div>';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/i/' + image.image_name + '.' + image.image_extension + '" readonly>';
    imageHTML += '<span class="input-group-addon">Direct</span>';
    imageHTML += '</div>';
    imageHTML += '<div class="input-group input-group-sm">';
    imageHTML += '<input type="text" class="form-control" onclick="this.select();" value="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" readonly>';
    imageHTML += '<span class="input-group-addon">Thumb</span>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</div>';
    imageHTML += '</span>';

    $('.images').append($(imageHTML));
    $('.image').slideDown('fast');
}

LESS 对于这样的盒子:

span.image {
    padding: 15px;
    width: 271px;
    height: auto;
    display: inline-block;
    border: 1px solid @lighten; 
    background-color: lighten(@lighten, 6%);
    overflow: hidden;
    cursor: default;
    position: relative;

    @media (max-width: 1200px){
        width: 296px;
    }

    @media (max-width: 992px){
        width: 336px;
    }

    @media (max-width: 768px){
        width: 432px;
    }

    .img-container {
        width: 130px;
        height: 130px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 4px;
        /* background-color: lighten(@light-grey, 10%);
        padding: 5px;
        border: 1px solid @light-grey; */

        .helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }

    .close {
        position: absolute;
        top: 8px;
        right: 8px;
        cursor: pointer;
        z-index: 500;
        width: 16px;
        height: 16px;
    }

    img {
        max-width: 125px;
        max-height: 125px;  
    }
}

我没看到是什么让这些盒子粘在一起？

帮助将不胜感激。

---

编辑

这是从呈现的浏览器格式(控制台)复制的 HTML:

<span class="image" style="">
    <div aria-hidden="true" class="close">×</div>
    <section class="row">

            <div class="col-lg-12 center upload-output">
                <br><br>

                <div class="img-container">
                    <div class="helper"></div>
                    <a data-lightview-group="images" class="lightview" href="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg">
                        <img class="img-thumbnail" src="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg">
                    </a>
                </div>
            </div>

    </section>
    <hr>
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/image/e9K7P8V3z6o4" onclick="this.select();" class="form-control">
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/i/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/t/e9K7P8V3z6o4.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>

这是来自控制台的另一个框，但稍后通过 AJAX 添加:

    <span class="image" style="">
    <div aria-hidden="true" class="close">×</div>
    <section class="row">
        <div class="col-lg-12 center upload-output">
            <br><br>
            <div class="img-container">
                <div class="helper"></div>
                <a class="lightview" href="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg">
                    <img class="img-thumbnail" src="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg">
                </a>
            </div>
        </div>
    </section>
    <hr>
    <div role="form">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/image/l1I6a4Z1u9L7" onclick="this.select();" class="form-control">
                <span class="input-group-addon">View</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/i/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Direct</span>
            </div>
            <div class="input-group input-group-sm">
                <input type="text" readonly="" value="http://localhost/imgzer/store/t/l1I6a4Z1u9L7.jpg" onclick="this.select();" class="form-control">
                <span class="input-group-addon">Thumb</span>
            </div>
        </div>
    </div>
</span>

---

问题

有人对此有很好的解决方法吗？我如何使这些框看起来正常？任何帮助将不胜感激。

Answer 1

在原始 HTML 代码中，元素之间有空格。当您构建字符串时，您的元素会立即一个接一个，完全没有空格。

添加空格:

imageHTML += '</span> ';

没有空格:http://jsfiddle.net/uwE7X/

空间:http://jsfiddle.net/uwE7X/1/