2

我正在从服务器获取数据（定期）。我需要在每一行前面显示一些文本。所以我认为如果高度发生变化，那么我会在前面的 div 中附加数据。但它不起作用，因为有时大量数据来自服务器（意味着两三行来一次）高度发生了变化。但它只附加一次。

所以我的结果看起来像这样

Text                     Server  data
changed Hiiiii.  is i am checking this in the div
        please check me also and everty thing is 
        fine well know dive sdsfdsfsdfdfsdfdsfdsfsd
changed Hiiiii.  is i am checking this in the div
        please check me also and everty thing is 
        fine well know dive sdsfdsfsdfdfsdfdsfdsfsd

但我需要我的结果看起来像这样

Text                     Server  data
changed Hiiiii.  is i am checking this in the div
changed please check me also and everty thing is 
changed  fine well know dive sdsfdsfsdfdfsdfdsfdsfsd
changed Hiiiii.  is i am checking this in the div
changed please check me also and everty thing is 
changed fine well know dive sdsfdsfsdfdfsdfdsfdsfsd

我以这种方式尝试。也许我会一次得到100行。但我需要在内容前面显示 100 次文本。

http://jsfiddle.net/naveennsit/dRrnX/

$(function() {
    var h = -1;
    setInterval(function () {
        var newHeight = $('#realTimeContents').append("Hiiiii.  is i am checking this in the div please check me also and everty thing is fine well know div").height();
        if (h == -1) h = newHeight;
        if (h != newHeight) {
            h = newHeight;
            $('#realTimeContents1').append(" changed ");
            //alert("I've changed height");
        }
    }, 1000);
});
4

1 回答 1

1

我会做这样的事情：

.data .status,
.data .text {
    float: left;
}
.data .status {
    width: 25%;
}
.data .status span {
    display: block;
}
.data .text {
    width: 75%;
}

<section class='data'>
    <div class='status'><span>Changed</span></div>
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum blandit neque. Nulla facilisi. Sed ornare luctus nulla euismod tincidunt. Cras rhoncus semper mi vitae facilisis. Nulla facilisi. Aliquam feugiat quis dui sit amet pretium. Nunc et accumsan risus, non lobortis mi. Donec pulvinar lacus diam, eu feugiat tortor malesuada a. Aenean pretium quam mi, id tincidunt nulla posuere nec</div>
</section>

var $data = $('.data');

$data.each(function e(){
    var $text = $(this).children('.text'),
        $status = $text.prev('.status'),
        $span = $status.children('span'),
        height = $text.height();

    while ($status.height() < height) {
        $status.append($span.clone());
    }
});

http://jsfiddle.net/userdude/mJfjN/

请注意，创建无限循环相当容易，所以要小心。

编辑

$(window).resize()：

$(window).resize(changed);

changed();

function changed() {
    $('.data').each(change);

    function change(){
        var $text = $(this).children('.text'),
            $status = $text.prev('.status'),
            $span = $status.children('span:first'),
            height = $text.height();

        $span.siblings().remove();

        while ($status.height() < height) {
            $status.append($span.clone());
        }
    }
}

http://jsfiddle.net/userdude/mJfjN/4/

于 2013-08-17T14:55:55.393 回答