Изменить AJAX HTML-ответ с каждой функцией - PullRequest
Новая
       12

Изменить AJAX HTML-ответ с каждой функцией

1 голос
/ 01 апреля 2012

Может кто-нибудь сказать мне, почему этот код не обновляет ответ данных?Это простой пример функции каждая .

Вот HTML-файл, запрошенный ajax: 

<html>
<div class="new">
    <div class="span4">
        <h2>Heading1</h2>
        <p>Text1</p>
        <p><a href="#">Link1</a></p>
    </div>
    <div class="span4">
        <h2>Heading2</h2>
        <p>Text2</p>
        <p><a href="#">Link2</a></p>
    </div>
</div>
</html>

, а вот основное тело файла: 

<!DOCTYPE html>
<body>
<textarea id="gethtml" rows="40" cols="125"></textarea>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    "use strict";
    $(function() {

        $.get('file.html', function(data) {
            ajaxfunction(data);
        });

        function ajaxfunction(data) {
            $(data).find(".span4").each(function () {
                $(this).find("p").eq(0).text("Hello");
                $(this).find("p").eq(0).after("<p>newline</p>");
                console.log($(this));
            });
            $("#gethtml").val(data);
        }

    });
</script>
</body>
</html>

Вы видите, что консоль отображает правильные данные для каждого span4, но почему строка «data» не обновляется для отражения изменений?

EDIT 

function ajaxfunction(data) {
            var tree = $("<div>" + data + "</div>");
            $(tree).find(".span4").each(function () {
                $(this).find("p").eq(0).text("Hello");
                $(this).find("p").eq(0).after("<p>newline</p>");
                console.log($(this));
            });
            $("#gethtml").val(tree.html());
}

Это место в текстовой области, т.е. <p>Hello</p><p>newline</p>.Итак, чтобы также вставить новую строку в нее, мне придется изменить ее как строку, верно?

Спасибо!

1 Ответ

2 голосов
/ 01 апреля 2012

data - это строка.

Ваш код each анализирует эту строку в дереве DOM и модифицирует ее.
Однако с этим деревом DOM вы ничего не делаете.

Ваш val() вызов снова использует исходную строку.

Вместо этого вам нужно вызвать html(), чтобы получить источник модифицированного дерева DOM.

Для получения дополнительной информации см. мой блог .

...