如何定位交替的奇/偶文本行 [英] How to target alternate odd/even text lines

问题描述

说我有一个 p 元素或 div 元素有一个文字说约10-15行，现在我的客户对此有一个奇怪的呼叫，他需要奇/偶行具有不同的文字颜色。说行1 - 黑色，所以行2应该是灰色，行3应该是黑色等等...

Say I've a p element or div element having a text say about 10-15 lines, now my client has a weird call on this, he needs odd/even lines having different text color. Say Line 1 - Black, so Line 2 should be Grey, Line 3 should be again black and so on...

所以我决定使用span的改变颜色，变量分辨率在这里杀了事情，我知道：第一行选择器（这将不是有用的在这种情况下），还选择像 ：odd & ：even 将被排除在这里，因为不使用表，所以有任何方式我可以实现这使用CSS或者我需要使用jQuery？

So I decided using span's and changed the color but variable resolution is killing things here, Am aware of the :first-line selector (Which won't be useful in this case), also selectors like :odd & :even will be ruled out here as am not using tables, so is there any way I can achieve this using CSS or do I need to use jQuery?

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

TL; DR : I want to target odd/even lines in a paragraph or a div

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

I need a CSS solution, if not, jQuery and JavaScript are welcome

推荐答案

演示1

，复合的事实，它的上午3:30。

Demo 1

A rather ugly little solution, compounded by the fact that it's 3:30 AM. Still, it works on plain text blocks and allows each line to be individually styled.

小提琴： 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（这一定会受到限制。）

1. Splits the source into individual words once
2. Wraps each word in a span (ugly but effective-any style can now be applied to the span)
3. Uses a simple position calculation to determine if the element is lower than the previous
4. Changes colors based on index change
5. Performs #3-5 on resize (this should definitely be throttled!)

$(".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/

• 使用较大的文字块


• 显示应用于多个元素的效果


• 缓存所有跨度选择器


• 添加resize限制

• Uses a larger block of text
• Shows effect applied to multiple elements
• Caches the "all spans" selector
• Adds resize throttling

(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);
})();

输出

Output

这篇关于如何定位交替的奇/偶文本行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！