Javascript CSS类的特定于目标的实例

我有没有办法针对第三个div Is this list并对其应用一个新的CSS类

如果可能，使用CSS、JS或jQuery。（或者任何人能想到的其他东西）

测试

测试

测试

测试

测试

测试

如果你想要一个CSS解决方案，你可以随心所欲

div.item:nth-of-type(3) {
   /* Target 3rd div */
}

这不会添加类，但将针对第三个

div

---

我不知道下行投票的作用是什么，但也要确保将这些元素绑定到包装器元素中，比如说

div

having class，例如

wrapper

，这样选择器就会

div.wrapper > div.item:nth-of-type(3) {
   /* Styles here */
}

---

没有CSS类这样的东西。CSS有选择器。一种类型的选择器是类选择器。HTML有类

您可以组合任意数量的选择器。听起来你好像想要这个

使用jQuery：

$("div.item:eq(2)").addClass("test");

---

没有“CSS类”这样的东西，更不用说它的实例了。您想要的是针对

div

元素中属于某个类（在HTML标记中分配给它）的第三个元素

答案是这取决于周围的环境。如果不知道此

div

元素序列如何嵌套在其他元素中以及哪些元素（尤其是

div

元素可能出现在它前面），就无法定位所需的元素

例如，如果我们假设这些元素构成元素的内容，如

…

，那么很简单：

.foo > :nth-child(3) { /* CSS declarations here */ }

一些旧版本的IE不支持

：nth-child（）

伪类。

用于查找类'item'，并请求3个一和添加类：

$('.item:nth-of-type(3)').addClass('new-class');

---

纯JavaScript解决方案

您可以使用

getElementsByClassName

：

// Gets the third element with the class "item"
element = document.getElementsByClassName("item")[2];
// Assigns a new class to it
element.setAttribute("class", "newclass");

对于纯JS：

var items = document.getElementsByClassName("item");
myItem = items[2]; // as the first element is 0, third element is position 2 in the array;
myItem.setAttribute('class', 'myClass');

较短的方法是：

document.getElementsByClassName('item')[2].setAttribute('class', 'myClass');

---

---

您必须小心使用此方法和其他方法，因为如果页面上还有其他类“item”，它也会起作用，您最好将所有这些div包装在父div中，为该父div提供一个ID或其他内容，并以父div为目标。

对于这样的标记-

 <div id="div1" class="someclass">
        <img ... id="image1" name="image1" />
    </div>

---

并且可以在jQuery中使用addClass方法。

分配id并引用div“如果可能，使用JS或jQuery”是一个奇怪的要求。那么，纯CSS解决方案就差了？只有在跨浏览器的情况下，你才需要纯CSS方法，如果可能的话，如果不是javascript方法，或者使用你正在/将要在该项目中使用的任何库，我能想到的解决这个问题的方法就是使用CSS书籍。但它需要阅读。搜索也会有所帮助。但是它需要搜索。可能的重复：而且很可能有很多其他的。jQuery不是万能的解决方案，他也在要求CSS不，jQuery也可以。现在我将尝试此操作…以

为目标：
$（“div.item:eq（2）p”）.addClass（“test”）LOL-1我的答案？答案的理由令人高兴。否决票不是我…@愚蠢的我不在乎我是否得到否决票，但我也想知道否决票的原因，因为我首先提出了这个解决方案，其他人都提出了同样的建议，但不知道我的答案有什么问题，不管怎样，你欢迎：）我没有否决票，但我猜这是因为这种方法在低于9的IE版本上不起作用，这将是一个很好的观点…@aleation:）他将其标记为css和js，所以我提供了另一种选择，这取决于op选择他想要的版本，这可能对其他用户有帮助良好的答案。当纯JS解决方案如此简单时，为什么要使用jQuery？：）@因为人们倾向于认为jQuery是解决一切问题的解决方案。它们更愿意包含一个巨大的库来实现简单的事情，而不是在这里或那里增加一行代码。我知道，这很伤心…很好的一句台词，还有很好的建议。
document.getElementsByClassName('item')[2].setAttribute('class', 'myClass');

 <div id="div1" class="someclass">
        <img ... id="image1" name="image1" />
    </div>

var d = document.getElementById("div1");
d.className = d.className + " otherclass";