Question

我一直在努力学习JavaScript并试图破解JS小提琴试试。 http://jsfiddle.net/Xy9Ga/ 目标使用 JAVASCRIPT ： 1）从第一项开始，使每第三个列表项为红色文本和斜体。 2）从第五项开始，将每个第十项加粗并加下划线。

我知道要创建css类，然后相应地将它们应用于列表项。我无法弄清楚JavaScript方面的问题:(不是真的在找人为我编码，但可能会解释如何做到这一点的逻辑。我不知道从哪里开始

document.load =function() {
};

我制作的两个CSS类是

    .reditem {
    color: red;
    font-style: italic;
}

.blackitem {
    font-weight: bold;
    font-style: underline;
}

Answer 1

改为使用nth-child伪类。

我更新了您的fiddle以显示此内容。

基本上，系数是应用的频率，添加的部分是它开始的地方（这不完全正确，但对我来说足够接近）。

这意味着每三分之一，从第一个开始，它是nth-child(3n+1)，每十分之一，从第五个开始，它是nth-child(10n+5)。

Here是nth-child的文档。

Answer 2

创造了你的小提琴的叉子和我相信你的要求，如果你被困住，请偷看！ jsfiddle.net/realchaseadams/Xy9Ga/8

var list_items = document.getElementsByTagName('li');

for(var i = 0, len = list_items.length; i < len; i++) {
    if (i % 3 === 0) {
      list_items[i].className += ' third';   
    }
    if ((i % 10 === 0 && i !== 0) || i === 4) {
      list_items[i].className += ' fifth';   
    }
}

看起来你对控制流程和控制流程更感兴趣运算符和添加具有样式定义属性的类。

Answer 3

你需要做的是。

首先创建一个包含所有li元素的Nodelist。
遍历整个列表并检查索引是否可以除以3。

当你的元素使用css（）函数改变文本的颜色时。

var nodeList = $('li');

nodeList.each(function (index, val) {
    if ((index + 1) % 3 === 0) {
        $(this).css('color', 'red');
    }
});

Here is your fiddle modified

使用javascript将样式应用于某些列表项

3 个答案: