Question

如何使用jQuery将类添加到第一个div。

我尝试了以下代码，但对我不起作用。也许我错过了什么。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>

编辑：感谢大家，无论如何都要为其他DIV添加课程吗？

Answer 1

试

$(document).ready(function() {
  $('.item:first-child').addClass('first');
});

Answer 2

您正在准备标记之前执行代码。将代码包装在

中

// document ready short-style
$(function() {

});

Answer 3

您的代码是正确的，但是在DOM准备好之前执行，请将<script></script>移到</body>之前的最后一行。

要向其他元素添加一个类，您可以执行此操作（来自VisioN的comment）

$(".item:not(:first,:last)").addClass("differentClass");

Answer 4

$(".item :first").addClass('first');

Answer 5

您的代码应在DOM完全加载时执行。所以使用$（document）.ready（）。

只要DOM层次结构完全可以运行脚本建造。传递给.ready（）的处理程序是保证的在DOM准备好之后执行，所以这通常是最好的地方附加所有其他事件处理程序并运行其他jQuery代码。

Read more关于$（文件）.ready（）。

检查下面的代码。它将帮助您完成您想要的任务。

   $(document).ready(function() {
          $('.item').first().addClass('first');
        });

否则你的js甚至在加载DOM之前就已经运行了

$(".item:first").addClass('first');也可以。

<强> Try the demo too.

希望这会帮助你。如果您有任何疑问，请随时提出。感谢

Answer 6

你使用这段代码

$(function(){
   $(".item:first-child").addClass("anyclass");
})

or
  $("div:first-child").addClass("anyclass");

Answer 7

请参阅jsfiddle here

$(document).ready(function() {
    $('div:first').addClass('first');
});

Answer 8

试试这个

JS CODE

$(document).ready(function(){
   $('div.item')
     .eq(0).addClass('first').end()
     .eq(-1).addClass('last').end();
});

的 DEMO 的

注意

您需要使用$(function() { ... })来包装整个jQuery代码。

Answer 9

你总是可以使用直接的CSS，虽然它是CSS3。例如。你可以用以下代码替换你的当前CSS：

.item:nth-of-type(1), .item:nth-of-type(3)
{
   background-color:#0099FF;
}

如果您只想要jQuery，那么您可以尝试：

$('.item:first').addClass('first');
$('.item:last').addClass('last');

Answer 10

这是jQuery代码

<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>

此致 http://www.santoshkori.com

使用jQuery将类添加到第一个div

10 个答案:

注意