jQuery .before и .after ведут себя не так, как ожидалось

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть следующий HTML-код

 <p><img src="src.jpg" clas="left" title="image title text"></p>

И следующий jQuery

 $( document ).ready(function() {
    $('img').each(function() {
        var t = $(this).attr('title'),
            c = $(this).attr('class'),
            w = $(this).width();
        $(this).before('<div class="caption '   c   '">');
        $(this).after(t   '</div>');
    });
});

Однако результат, который это дает мне, выглядит следующим образом

 <p><div class="caption left"></div>
<img src="src.jpg" clas="left" title="image title text">
image title text</p>

Я ни за что в жизни не смогу понять, почему открытие и закрытие DIV происходит раньше, когда я указываю закрывающий тег в разделе .after. Бьюсь об заклад, это супер базовый, но я просто не вижу его. Любая помощь приветствуется.

Приветствия.

Ответ №1:

Вы можете добавлять в документ только элементы, а не теги. Когда HTML-код для страницы анализируется, начальный и конечный теги в конечном итоге становятся объектом с одним элементом в DOM.

Когда вы пытаетесь добавить начальный тег, браузер добавит конечный тег, чтобы завершить его. Когда вы пытаетесь завершить конечный тег, он будет просто проигнорирован. (По крайней мере, в используемом вами браузере. Поведение может отличаться для других браузеров.)

Чтобы обернуть один элемент вокруг другого, используйте wrap метод или wrapAll method:

 $(this).wrapAll('<div class="caption '   c   '"></div>').after(t);

Демонстрация: http://jsfiddle.net/JR4j3 /

1. Спасибо loads, это было невероятно полезно и имеет большой смысл теперь, когда я неправильно использовал эти теги. Теперь работает отлично! Просто нужно отсортировать стили.

Ответ №2:

Вы не можете открыть div, не закрыв его.

Или правильный способ сказать это: вы не можете открыть элемент с помощью before (или любого другого оператора добавления), не закрыв его с помощью той же операции.

Таким образом, это означает, что у вас не может быть .before('<div>') и после этого .after('</div>') .

Для этого вы можете использовать wrap.

Ответ №3:

Именно так это и работает. Вы вставляете недопустимый HTML-код перед элементом, используя функцию .before() . Элемент div без закрывающего тега недопустим, и браузер автоматически добавит закрывающий тег, чтобы попытаться устранить проблему.

Вместо использования .before() и .after(), взгляните на метод .wrap() .