jquery获取CSS多列中可见列的文本

Question

我使用 CSS 多列显示一个 html 文件，列宽设置为窗口宽度，因此一次只显示一列 _windowWidth = $( window ).innerWidth(); 。列的高度也设置为窗口的高度 _windowHeight = $( window ).innerHeight(); 。在 css 中 container 的溢出被隐藏了overflow: hidden.

我可以用$('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});更改可见列

我想要的是获取当前可见的列文本。

$('#content').children(":visible").text(); 返回所有列文本。

我找到的最近的问题和答案是：Get text in CSS3 column?，他建议这个功能：

var getAllTextInColumn = function(rect){
    /*
        rect should be the size and x,y of the column
        { top, left, width, height }
    */

    if(document.caretRangeFromPoint){
        var caretRangeStart = document.caretRangeFromPoint(rect.left, rect.top);
        var caretRangeEnd = document.caretRangeFromPoint(rect.left+rect.width-1, rect.top+rect.height-1);
    } else {
        return null;
    }

    if(caretRangeStart == null || caretRangeEnd == null) return null;

    var range = document.createRange();
    range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);
    range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);

    return range.toString();
};

但我不知道如何获取列的rect（例如第 3 列）

任何帮助将不胜感激。

tnx 提前。

更新：

这个函数确实有效，但我不知道它的参数，如果我通过left = 0 , top = 0 , width = _windowWidth , height = _windowHeight 它会给我第一列的文本。

如果我通过 left = _column * (_windowWidth + _columnGap) , top = 0 , width = _windowWidth , height = _windowHeight 并且 _column 是 0 或 1 它给出第一列的文本，如果 _column > 2 caretRangeStart 将是 null。

如果我通过left = 0 , top = 0 , width = _column * (_windowWidth + _columnGap) + _windowWidth , height = _windowHeight，caretRangeEnd 将变为null，所以我无法使用任何组合，可能有人可以帮助我。

Answer 1

根据您的描述，您并没有真正隐藏或显示您的列。你基本上是在改变 x 偏移量。

你应该做相反的事情：获取 x 偏移并将其除以 - (_windowWidth + _columnGap)

要获取文本尝试：

$('#content').children().eq(index).text();