jQuery replaceWith () документация - PullRequest
Новая
       5

jQuery replaceWith () документация

0 голосов
/ 18 сентября 2011

Я работаю с документацией jQuery и нашел фрагмент примера replaceWith () (последний пример из http://api.jquery.com/replaceWith/), который мне не совсем понятен. Я опубликую ссылку на этот пост в качестве комментария на странице документации jQuery replaceWith (), чтобы помочь другим новичкам в работе с jQuery и DOM.

В частности, я не полностью понимаю поведение "$ container" в: 

"$("p").append( $container.attr("class") );"

Я ожидал, что приведенный выше код добавит слово "inner" к содержимому "p", потому что метод replaceWith () вызывался при создании переменной: 

var $container = $("div.container").replaceWith(function() {
    return $(this).contents();
});

Однако, "$ (" p "). Append ($ container.attr (" class "));" фактически добавляет слово «контейнер», а не слово «внутренний».

Кажется, что переменная "$ container" на самом деле ссылается на замененный div, "$ (" div.container ")", а не на заменяющий контент, "$ (this) .contents ();".

Два вопроса:

  1. Что "replaceWith ()" делает в этом контексте?
  2. Что-то особенное происходит с порядком операций или методом attr (), которого я не вижу?

Вот полный код: 

<!DOCTYPE html>
<html>
<head>
    <style> 
    .container { background-color: #991; }
    .inner { color: #911; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p>
    <button>Replace!</button>
</p>
<div class="container">
    <div class="inner">Scooby</div>
    <div class="inner">Dooby</div>
    <div class="inner">Doo</div>
</div>

<script>
$('button').bind("click", function() {
    **var $container = $("div.container").replaceWith(function() {
        return $(this).contents();
    });**

    **$("p").append( $container.attr("class") );**
});
</script>

</body>
</html>

1 Ответ

1 голос
/ 18 сентября 2011

Из .replaceWith() документации :

Метод .replaceWith(), как и большинство методов jQuery, возвращает объект jQuery, так что другие методы могут быть связаны с ним. Однако следует отметить, что оригинальный объект jQuery возвращается . Этот объект ссылается на элемент, который был удален из DOM, а не на новый элемент, который заменил его.

... так что то, что вы видите, является ожидаемым поведением, $container должно относиться к тому, что было заменено , а не к замене.

...