javascript – CSS / JS – 您能否像处理行一样对浏览器自动换行进行着色？

我不太确定如何用正确的词语表达我的问题,但我试着描述我想做的事情.

假设我们从数据库中获得了一组数据(例如数字),它们需要作为列表输出.我在一行中放置了预定义数量的数据字段(对于dekstop系统).每个数据都在SPAN中,具有颜色/边距/填充样式. (与表格单元格一样.)达到该数量的Spans后,会给出强制换行符.并且每次换行时,该“行”中所有跨距的背景颜色都会改变(奇数/偶数).到目前为止没问题.

但是,如果现在有人用智能手机检查该页面(或者您只是简单地调整浏览器窗口的大小),则预定义的数量不适合.例如,在大分辨率下,你有6个Spans并排,彩色奇数,6个Spans颜色均匀.在一个小分辨率你可能只有3个Spans并排,但在我的设计中你还有6个Spans色的奇数,所以两个“行”在改变之前具有相同的背景颜色.

示例HTML输出：

<span class="odd">Number 01</span>
<span class="odd">Number 02</span>
<span class="odd">Number 03</span>
<span class="odd">Number 04</span>
<span class="odd">Number 05</span>
<span class="odd">Number 06</span>
<br/>
<span class="even">Number 07</span>
<span class="even">Number 08</span>
<span class="even">Number 09</span>
<span class="even">Number 10</span>
<span class="even">Number 11</span>
<span class="even">Number 12</span>
<br/>

我完全不知道是否可能了解 – 可能通过Javascript或CSS,在“行”中显示多少个跨度,以自动化奇偶颜色,使其以某种方式响应.

检查我的Fiddle可能会更好地展示我想要的东西.

解决方法:

我想不出用CSS来解决这个问题,但这是一个javascript解决方案.浏览器支持有点偏差.没有意识到你在帖子中标记了jQuery,但它至少应该适用于现代浏览器：

window.addEventListener('resize', function(){
    var cells = document.querySelectorAll('.odd,.even');
    var activeClass='even', activeLine = 0;

    for(var i = 0, len = cells.length; i < len; i++) {
        cells[i].classList.remove('odd');
        cells[i].classList.remove('even');
        if(activeLine != cells[i].offsetTop + cells[i].offsetHeight) {
            activeClass = (activeClass === 'even') ? 'odd' : 'even';
            activeLine = cells[i].offsetTop + cells[i].offsetHeight
        }
        cells[i].classList.add(activeClass);
    }
});

/* edit: forgot to dispatch the event.
   jQuery makes this so much easier to write
   than the monstrosity below. */
var event;
event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);

在这里演示：http://jsfiddle.net/xh0o6gvy/1

编辑：这是Sunny在the comment below的小提琴中放置的jQuery版本.如果需要与旧版浏览器兼容,这绝对是比上述代码更好的方法.

function colorSpans() {
    var containers = $('.span_container');  

    containers.each(function() {
        var activeClass = 'even';        
        var activeLine = 0;
        var cells = $(this).children('.odd, .even');
        cells.each(function() {
            $(this).removeClass('odd even');
            var offset = $(this).offset();
            var height = $(this).outerHeight();
            if(activeLine != offset.top + height) {
                activeClass = (activeClass === 'even') ? 'odd' : 'even';
                activeLine = offset.top + height;
            }
            $(this).addClass(activeClass);
        });
    });        
}

$(window).on('resize', function() {
    colorSpans();
});

colorSpans();