Question

我必须动态创建一系列HTML块，如下所示：

<div class="col-md-4 gal-gd text-center wow fadeInUpBig animated animated" data-wow-delay="0.4s">
    <a href="images/r2.jpg" class="b-link-stripe b-animate-go  swipebox">
        <div class="gallery-gal-effect slow-zoom horizontal">
            <div class="img-box"><img src="images/r2.jpg" alt=" " /></div>
            <div class="gallery-text-box">
                <div class="gallery-gal-text">
                    <h4>Title</h4>
                    <span class="separator"></span>
                    <p>Description.</p>
                    <span class="separator"></span>
                    <p><a href="#">Cancella</a></p>
                    <span class="separator"></span>
                </div>
            </div>
        </div>
    </a>
</div>

这就是我在ajax请求中尝试实现它的方式：

    success: function (response, status) {
        $.each(response, function (i, item) {
            $('#output') 
                .append('<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s"><a href="' + item.path + '" class="b-link-stripe b-animate-go  swipebox"><div class="gallery-gal-effect slow-zoom horizontal"><div class="img-box"><img src="' + item.path + '" alt=""></img></div><div class="gallery-text-box"><div class="gallery-gal-text"><h4>' + item.title + '</h4><span class="separator"></span><p>' + item.descrizione + '</p><span class="separator"></span><p><a href="#" onclick="cancella('+item.id+');">Elimina</a></p><span class="separator"></span></div></div></div></a></div>');

这是我的HTML：

<div id="output">
    <!-- ajax request -->
</div>

问题是，我不知道原因，附加的代码如下所示：

<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-effect slow-zoom horizontal">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<div class="img-box">
<img src="images/r2.jpg" alt="">
</div>
</a>
<div class="gallery-text-box">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-text">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<h4>Title</h4>
<span class="separator"></span>
<p>Description</p>
<span class="separator"></span>
</a>
<p>
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<a href="#" >Other things</a>
</p>
<span class="separator"></span>
</div>
</div>
</div>
</div>

如你所见

<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>

重复5次而不是两次，这会在我的画廊中生成相同图像的5倍。

为什么呢？这里有什么问题？

Answer 1

您有const char *example = "\x27\xE4\x1B\x32\xE0\xF1\x62\x4C\x71\xB5\x24\x40"; Bignum bn = 0; for (int i = 0; i < 12; ++i) { bn *= 256; bn += example[i] & 0xff; } std::cout << bn << std::endl;个元素嵌套在另一个<a>元素中。这是不允许的。我甚至无法猜出这应该是什么意思。

HTML5规范。表示：

4.3.6.1 The a element

...

内容模型：
  Transparent，但必须没有interactive content后代。

其中交互式内容包含<a>元素。

我猜测jQuery（或浏览器的）HTML解析器会尝试插入额外的开始和结束标记，以便理解HTML，而不是最终得到你已经表现出奇怪的结果。

还有另一个错误：HTML中不允许使用a标记。

3.2.2.2 Void Elements

...

在HTML中，[...]   必须省略end tag，因为解析器会自动关闭该元素。

如果您想要可预测的结果，您需要找到一种方法将HTML重新编写为结构合理的内容。

意外的结果通过ajax附加HTML

1 个答案: