0

私は、各リストアイテムを調べ、次にそのアイテム内で各スパンを調べ、各スパンにいくつかのcssを一意に適用する各関数を作成しようとしています。

それに取り掛かると、迷子になり、各リストアイテム内の各スパンに一意の値を正しく取得する方法を実際に理解できません。

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

何か案は？

編集-これはクラス名の仕事のように思えますが、この例でのみ使用しようとしているcssのタイプを簡略化しました。後で、scrollTopやviewportHeightなどの他の値に依存するいくつかのより複雑なcssを渡します。

4

2 に答える 2

1

アイテムの構造を変更すると、ITが簡単になります。以下を参照してください。

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 に答える