如何定位备用奇数/偶数文本行

Question

假设我的p元素或div元素有一个大约10-15行的文本,现在我的客户端对此有一个奇怪的调用,他需要具有不同文本颜色的奇数/偶数行.比较第1行 - 黑色,因此第2行应为灰色,第3行应为黑色,依此类推......

所以我决定使用范围的,改变颜色,而是可变分辨率在这里杀的东西,是知道的的:first-line选择(这将不会在这种情况下很有用),也选择像:odd和:even会我不使用表来这里排除了,所以有什么方法可以使用CSS实现这一点,还是我需要使用jQuery？

TL; DR:我想在段落或div中定位奇数/偶数行

我需要一个CSS解决方案,如果没有,欢迎使用jQuery和JavaScript

Answer 1

演示1

一个相当丑陋的小解决方案,因为它是凌晨3:30.它仍然适用于纯文本块,并允许每行单独设置样式.

小提琴: http ://jsfiddle.net/Fptq2/2/
_{Chrome 26,FF 20,Safari 5.1.7,IE 8/9/10(7可能会起作用)}

基本上它:

1. 将源拆分为单个单词一次
2. 包含跨度中的每个单词(丑陋但有效 - 任何样式现在都可以应用于跨度)
3. 使用简单的位置计算来确定元素是否低于前一个
4. 根据索引更改更改颜色
5. 调整大小时执行#3-5(这绝对应该受到限制!)

$(".stripe").each(function(){
  var obj = $(this);
  var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
  obj.html(html);
});

function highlight(){
    var offset = 0;
    var colorIndex = 0;
    var colors = ["#eee","#000"];
    var spans = $(".stripe span");

    // note the direct DOM usage here (no jQuery) for performance
    for(var i = 0; i < spans.length; i++){
        var newOffset = spans[i].offsetTop;  

        if(newOffset !== offset){
            colorIndex = colorIndex === 0 ? 1 : 0;
            offset = newOffset;
       }

       spans[i].style.color = colors[colorIndex];
    }
}

highlight();
$(window).on("resize", highlight);

演示2

小提琴: http ://jsfiddle.net/Fptq2/4/

• 使用更大的文本块
• 显示应用于多个元素的效果
• 缓存"所有跨度"选择器
• 添加调整大小限制

(function () {
    $(".stripe").each(function () {
        var obj = $(this);
        var html = obj.html().replace(/(\S+\s*)/g, "<span>$1</span>");
        obj.html(html);
    });

    var offset = 0;
    var colorIndex = 0;
    var colors = ["#ccc", "#000"];
    var spans = $(".stripe span");

    function highlight() {
        for (var i = 0; i < spans.length; i++) {

            var newOffset = spans[i].offsetTop;
            if (newOffset !== offset) {
                colorIndex = colorIndex === 0 ? 1 : 0;
                offset = newOffset;
            }

            spans[i].style.color = colors[colorIndex];
        }
    }

    highlight(); // initial highlighting

    var timeout;
    function throttle(){
        window.clearTimeout(timeout);
        timeout = window.setTimeout(highlight, 100);
    }

    $(window).on("resize", throttle);
})();

产量