Question

如果你查看我的代码，它看起来很好。

这就是我在源头中所做的：

<ul id="blinds1" class="window"></ul>

这是浏览器在运行jQuery后吐出的内容的粗略概念：

<ul id="blinds1" class="window">
<li style="background-position: 0px 0px;" class="image"></li>
<li style="background-position: -40px 0px;" class="image"></li>
</ul>

这是我正在使用的jQuery：

$(document).ready(function(){
   $(".window").addBlinds();
});

jQuery.fn.addBlinds = function() {
    if ( this.exists() ){
        return this.each(function() {
            var ul = $(this), sect = 0, size = 12, loc = 0, time = 200;

            addSection();

            function addSection() {
                if (sect < size) {
                    setTimeout(function(){  
                        var section = $("<li />")
                        .css({backgroundPosition: loc+"px 0px"})
                        .addClass("image");
                        ul.append(section);
                        section.slideDown(time, "swing");
                        loc-=40;
                        sect++;
                        addSection();
                    }, time);
                }
            };

            ul.append("<div class='clear' />");
        });
    } else { return false };
};

.exists（）是我创建的一个小插件，只是为了以后在看到我的代码时不会让自己感到困惑。

Oooookay！现在到了让我难过的地步。出于某种原因，当我进行标记验证时，我得到了这个：

第61行，第41栏：“ul”的结束标记尚未完成

相关网页的网址：http://www.blanktree.com/about/

验证页面的网址：http://validator.w3.org/

任何人都可以帮助我吗？到底他妈发生了什么？哈哈哈

有些解决：

显然，在调用javascript之前，父<li></li>中必须存在现有子<ul></ul>才能将其作为有效代码接受。我只是在那里放一个空的孩子来清除错误。然而......这更像是一项工作，而不是一项决议。这似乎是验证器的问题，而不是我的代码。我有更好的办法吗？

非常感谢帮助。

Answer 1

您在div内添加了ul代码。您可能打算致电after()

ul.after("<div class='clear' />");

您还可以使用任何开发人员工具，例如Firebug或不查看html源代码，并确认检查错误可能位于何处。

其他答案

ul和ol 必需以生孩子，否则无效。要解决此问题，您可以将ul包裹在div中，并通过javascript添加ul，而不是默认情况下在代码中插入ul。

Answer 2

问题可能是您的ul.append(...);

append将你在元素中传递的内容放入其中。

也许你想要ul.after(...);

Answer 3

我认为没有办法让空列表（原样）有效。你可以：

创建一个临时空li（正如您已经发现的那样）
使用占位符div，并将ul附加到它，或者在addBlinds插件中用ul替换div。

JQuery函数在追加时打破html？

3 个答案:

其他答案