Question

我有10个不同的菜单项，所有菜单项都有不同的彩色边框，如下所示：

<ul id="flipbox" class="main-menu" align="right">
 <li class="item cyan active"><a href="#" alt="" title="">item 1</a></li>
 <li class="item orange"><a href="#" alt="" title="">item 2</a></li>
 <li class="item yellow"><a href="#" alt="" title="">item 3</a></li>
 <li class="item brown"><a href="#" alt="" title="">item 4</a></li>
 <li class="item blue"><a href="#" alt="" title="">item 5</a></li>
 <li class="item pink"><a href="#" alt="" title="">item 6</a></li>
 <li class="item green "><a href="#" alt="" title="">item 7</a></li>
 <li class="item sand"><a href="#" alt="" title="">item 8</a></li>
 <li class="item darkgray"><a href="#" alt="" title="">item 9</a></li>
</ul>

注意第一个li，类为“active”。通过jQuery，我想将活动li的bgcolor更改为用于其边框的颜色。这样的事情有可能吗？现在，我提出了这个代码，但它似乎是错误的。我还没有完成这项任务的第二部分（获取颜色并应用它）。

// Current menu item function
$(document).ready(function(){

// Array with li classes 
var menuItems = [];
$(".main-menu li").each(function() { menuItems.push($(this).attr('class').split(' ')) });
for (n = 0; n < 9; n++) {
    for (m = 0; m < 3; m++)
    if (menuItems[n] ===  'active' ) {
        alert('.' + menuItems[n][m]);
    }
}
});

Answer 1

我知道这不是jQuery，对不起，但如果你想用活动类设置列表项的样式，那么使用css：

li.cyan {
    background-color: cyan;
}
li.cyan.active {
    background-color: somethingelse;
}

编辑：

在jQuery中，将所有活动列表项的背景颜色更改为其边框颜色：

$(".main-menu li.active").each(function() {
    var borderColor = $(this).css('border-color');
    $(this).css('background-color', borderColor);
});

Answer 2

以下内容应该有效：

$(".main-menu li").css('background-color', null)
    .filter('.active').css('background-color', function () { 
         var classes = $(this).attr('class').split(/\s+/);
         for (var i = 0; i < classes.length; i++) {
             if (classes[i] !== 'item' && classes[i] !== 'active')
                  return classes[i];
         }
        return 'none';
     });

jsFiddle

jQuery - 将每个li的类作为数组

2 个答案: