Question

以下代码用于检查目标div在溢出（y-overflow）之前可以包含多少行（澄清：文本行）。

它的工作原理是复制DOM元素，清空其内容，然后一次添加<br>个标记（强制换行），每次检查溢出（通过检查scrollHeight＆gt; clientHeight））。

调试时我注意到它在Chome和FF中有效，但在IE9中，无论插入多少个标签，垂直滚动条都不会出现，因此循环永远不会正常退出。知道如何让它与IE一起工作吗？

function checkNumRows (obj){
    var overflow = false, rows = 0;

    var measureDiv = obj.clone().empty().css('overflow', 'auto'); //make a clone of the original
    measureDiv.appendTo(obj.parent()); //append it to DOM
    while (!overflow && rows < 500) {//set upper limit to 500 rows to prevent infinite looping for whatever reason
        measureDiv.append('<br>');
        overflow = measureDiv[0].scrollHeight > measureDiv[0].clientHeight ? true : false;
        rows = rows + 1;
    }

    measureDiv.remove(); //cleanup
    return rows - 1; //return max rows before overflow occured
}

alert(checkNumRows($("#testDiv"))); //IE incorrectly returns num rows as the max 499

Answer 1

这应该有效：

function checkNumRows (obj){
    var measureDiv = obj.clone().empty().appendTo(obj.parent());

    $span = $('<span>X</span>').appendTo(measureDiv);
    rows = Math.floor(measureDiv.height() / $span.height());

    measureDiv.remove();
    return rows;
}

alert(checkNumRows($("#testDiv")));

http://jsfiddle.net/zbdbq/13/

也许可以使用$span.outerHeight()来获得更好的效果。

Answer 2

如果“行”表示自动调整大小的内联元素，则可以尝试根据lineHeight CSS样式进行检查。

function checkNumRows(obj) {
    var line_height = parseInt(obj.css('lineHeight').replace('/em|px/', ''));
    var max_rows = Math.floor(obj.height()/line_height);

    return max_rows;
}

Answer 3

如果对代码进行的更改很少，请在将项目添加到克隆元素时添加一些“内容”。我不能100％回忆，但我似乎记得IE喜欢崩溃的白色空间，这可能导致一些感觉到时髦的行为 -

在你的小提琴中你调用empty（）（清空元素），然后继续附加一些自己为空的br元素 -

 var measureDiv = obj.clone().empty().css('overflow', 'auto');

一种选择是添加一些内容以防止这种情况发生 - 即.append(' <br>') http://jsfiddle.net/zbdbq/9

我想同样可以确保你没有一个空元素 - obj.clone().empty().html(' ')... http://jsfiddle.net/zbdbq/10/

Answer 4

由于你在外观上使用jQuery，你应该直接这样做：

$("#myTable > tbody > tr").length

该函数仅计算此处使用“myTable”指定的立即数表中的行。如果您还想考虑嵌套表，那么您应该使用：

$('#myTable tr').length;

检查div中行数的功能在IE9中不起作用

4 个答案: