Функция JQuery нарушает HTML при добавлении?

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" который не закончен

URL рассматриваемой страницы: http://www.blanktree.com/about/

URL страницы проверки: http://validator.w3.org/

Может кто-нибудь помочь мне здесь? Что, черт возьми, происходит? хахаха

Отчасти решено:

Очевидно, должен существовать дочерний элемент <li></li> в родительском элементе <ul></ul> даже до вызова javascript, чтобы он принял его в качестве допустимого кода. Я просто положил туда пустого ребенка, чтобы убрать ошибку. Однако .... Это скорее работа, чем решение. Это похоже на проблему с валидатором больше, чем с моим кодом. Есть ли лучший способ, которым я должен идти об этом?

Помощь приветствуется.

Answer 1

Вы добавляете тег div внутри ul. Вы, вероятно, хотели позвонить after()

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

Вы также можете использовать любые инструменты разработчика, такие как Firebug или что-либо, что не нужно для просмотра исходного кода html, и подтвердите проверку, чтобы увидеть, где может лежать ошибка.

ДОПОЛНИТЕЛЬНЫЙ ОТВЕТ

ul и ol необходимы , чтобы иметь детей, иначе это недействительно. Чтобы решить эту проблему, вы можете заключить ваш ul в div и добавить ul через javascript, а не вставлять ul в код по умолчанию.

Answer 2

Я не думаю, что есть какой-либо способ сделать пустой список действительным. Вы можете либо:

• создание временного пустого li (как вы уже обнаружили)
• используйте заполнитель div и добавьте к нему ul или замените div на ul в плагине addBlinds.

Answer 3

проблема может заключаться в том, что ваше ul.append(...);

добавление помещает все, что вы передали внутрь элемента.

возможно, вы хотите ul.after(...);