0

我正在尝试编写一个 each 函数来查看每个列表项，然后在该项目中查看每个跨度，将一些 css 唯一地应用于每个跨度..

当我开始深入研究时，我迷失了方向，无法真正弄清楚如何正确获取每个列表项中每个跨度的唯一值..

http://jsfiddle.net/anthonybruno/9sKNZ/2/

有任何想法吗？

编辑- 我意识到这似乎是类名的工作，但我已经简化了我试图仅用于此示例的 css 类型。稍后我将传递一些更复杂的 css，这些 css 将依赖于其他值，例如 scrollTop 和 viewportHeight。

4

2 回答 2

1

如果您更改项目结构，它会更容易..见下文，

var items = [['font-weight: bold',
    'text-decoration: underline',
    'text-transform: uppercase'],
    ['color: purple', 'color: yellow'],
    ['color: pink']];

$(document).ready(function() {
    $('li').each(function(liIdx) { // For each list item
        var curCss = items[liIdx];
        $(this).find('span').each(function(idx) {
            var cssStyle = curCss[idx].split(':');
            $(this).css(cssStyle[0], cssStyle[1]);
        }); // Each span should get unique css value            
    });    
});

演示

于 2012-05-30T18:13:58.983 回答
0

首先，如果您更改items以下内容会更好：

var items = [
    [
    'font-weight: bold',
     'text-decoration: underline',
     'text-transform: uppercase',
    ],
    [
    'color: purple',
    'color: yellow',
    ], 
    [
    'color: pink'
    ]
  ];

$(document).ready(function() {
    $('li').each(function(liIndex, li) {
        $('span', this).each(function(index, el) {
            var curCSS = items[liIndex][index].split(':');
            $(this).css(curCSS[0], curCSS[1])
        });
    });
});

演示 1

如果您不想更改items结构，请尝试以下操作：

var items = [
    {
    spanOne: 'font-weight: bold',
    spanTwo: 'text-decoration: underline',
    spanThree: 'text-transform: uppercase'},
{
    spanOne: 'color: purple',
    spanTwo: 'color: yellow'},
{
    spanOne: 'color: pink'}
];

$(document).ready(function() {
    var ref = ['spanOne', 'spanTwo', 'spanThree']; // an array to make reference
    $('li').each(function(liIndex, li) {
        $('span', this).each(function(index, span) {
            var curCSS = items[liIndex][ref[index]].split(':');
            $(this).css(curCSS[0], curCSS[1])
        });
    });
});

演示 2

于 2012-05-30T18:14:26.293 回答