将类名(存储在数组中)添加到列

时间:2014-08-11 15:22:50

标签: javascript

我需要为表列添加不同的类名。如果列数多于类名,则应平均分配。所以,让我说我有一些变量,如:

var tableColumns = 5,
    skipColumns = 1,
    classNames = ['s','m','l'];

最后,列的类名应该或多或少(对于此示例)

column 2 -> "s" // Column 1 is skipped
column 3 -> "m"
column 4 + 5 -> "l"

或(如果这样做更容易)像这样

column 2 + 3 -> "s" // Column 1 is skipped
column 4 -> "m"
column 5 -> "l"

我尝试用两个for循环来做这个,但它并不适用于每个列数

var tableColumns = 5,
    skipColumns = 1,
    classNames = ['s','m','l'],

    columnsPerClass = Math.round(( tableColumns - skipColumns ) / classNames.length );

if( tableColumns > classNames.length ) {
  for ( var i = 0; i < classNames.length; i++ ) {
    // Loop through all class names
    for ( var j = 0; j < columnsPerClass; j++ ) {
      console.log( 
          'Column ' + ( i * columnsPerClass + j + skipColumns + 1 ) + 
          ' / Class name: ' + classNames[ i ]
      );
      // Add class names to columns
    }
  }
}

http://jsbin.com/qixufemu/4/edit?js,console

例如,如果我将tableColumns设置为5并将skipColumns设置为1,则输出为:

"Column 2 / Class name: s"
"Column 3 / Class name: m"
"Column 4 / Class name: l"

因此输出中缺少第5列。

修改 我认为它不是很清楚,skipColumns是什么。所以我很快创建了三个例子。 enter image description here

1 个答案:

答案 0 :(得分:1)

我不认为我完全理解skipColumns变量应该是什么意思,但我尝试使用以下脚本来实现您所描述的内容:

var columns = 7;
var classNames = ['s', 'm', 'l'];
var skipColumns = [3];
var colsPerClass = Math.round((columns - skipColumns.length) / classNames.length);
var colClassNames = [];
for (var i = 0; i < classNames.length; i++) {
    var currentClassCount = 1;
    while (currentClassCount <= colsPerClass) {
        colClassNames[colClassNames.length] = classNames[i];
        currentClassCount++;
    }
}
if (colClassNames.length < columns) {
    var currentClassCount = 1;
    colsPerClass = 1;
    i = 0;
    while (currentClassCount <= colsPerClass) {
        colClassNames[colClassNames.length] = classNames[i];
        currentClassCount++;
        i = i < (classNames.length) ? i++ : 0;
    }
}
console.log(colClassNames);
function findValue(val, array) {
    var iterator = array.length;
    if (iterator <= 0)
        return false;
    while (iterator--) {
        if (array[iterator] == val){
            return true;
            }
    }
    return false;
}
var skippedColumns = 0;
var columnsWithClassNames = [];
for (var i = 1; i <= columns; i++) {
    if (!findValue(i, skipColumns)) {
        columnsWithClassNames[columnsWithClassNames.length] = { ColNumber: i };
        columnsWithClassNames[columnsWithClassNames.length - 1].ClassName =         colClassNames[i - (1 + skippedColumns)];
    } else {
        skippedColumns++;
    }
}
console.log(columnsWithClassNames);

我能够实现您对@RobH的回复中描述的结果。可以使这个操作更有效率,但我想我们需要知道skipColumns变量的影响。

在当前表单中,脚本将生成一个JSON对象数组,其中包含该列的列号和类名,如下所示(基于您的示例):

[Object { ColNumber=1, ClassName="s"}, Object { ColNumber=2, ClassName="s"}, Object {     ColNumber=3, ClassName="m"}, Object { ColNumber=4, ClassName="m"}, Object { ColNumber=5,     ClassName="l"}, Object { ColNumber=6, ClassName="l"}]

这可能不是您想要的格式,但算法似乎达到了您的目的。

相关问题