jquery - 如果内容在 jQuery 中出现大行，如何在 div 中显示数据(在每个内容前面)？

Question

我正在从服务器获取数据(定期)。我需要在每一行前面显示一些文本。所以我认为如果高度发生变化，那么我会在前面的 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);
});

Answer 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/