jQuery，必要时更新内容

Question

我正在尝试更新位于 div (div1) 中的聊天内容，但仅当 div1 的内容发生更改时（一条消息已提交到 db 并在 div1 中提取）。

我尝试了 here 的解决方案，但我的 get 无法比较数据。

此解决方案完美运行，但没有内容比较：

window.onload = startInterval;
function startInterval()
{
    setInterval("startTime();",2000);
}

function startTime()
{
    jQuery('#div1').load('index.php #div1 > *');
}

这是基于this的修改，失败：

window.onload = startInterval;
function startInterval()
{
    setInterval("startTime();",2000);
}

function startTime()
{
    var $main = $('#div1');
    $.get('chat.php #div1', function (data)
    {
        if ($main.html() !== data) $main.html(data);
    }); 
}

我尝试了对这段代码的各种修改，但无济于事...... 我无法重新加载整个页面，如果没有必要，我也不想这样做，因为如果您必须滚动浏览消息，这会使聊天更难阅读。 如何解决这个问题？

更新

根据@T.J 的建议，我修改了现在完美运行的代码：

window.onload = startInterval;
function startInterval()
{
    setInterval(startTime,3000);
    scrolDown();
}

function startTime()
{
    var $main = $('#div1');     
    $.get('#div1', function (data)
    {
        elements = $(data);
        thisHTML = elements.find("#div1").html();
        if ($main.html() !== thisHTML) {                
            $main.html(thisHTML);
            scrolDown();
        }           
    });     
}

另一个问题是获取所需的库：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

这显然不是我之前使用的负载所需要的。

Answer 1

您想使用get，但又想要load 的片段功能，所以您必须自己完成这项工作。然后记住你上次得到了什么，只有不一样才更新：

var lastHTML;

function startTime()
{
    var $main = $('#div1');
    $.get('chat.php', function (data) // <== Or index.php, the question has both
    {
        var elements, html;

        // Turn the HTML into elements
        elements = $(data);

        // Get the HTML of *only* the contents of #div1
        html = elements.find("#div1").html();

        // If that has changed, use it
        if (lastHTML !== thisHTML) {
            lastHTML = thisHTML;
            $main.html(thisHTML);
        }
    }); 
}

请注意，这是片段功能的一个相当基本的实现（例如，它不会像 load 那样去除脚本）。您可能想看看 load 如何处理其片段内容并复制它（开源的乐趣）。