2

如何使用 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 添加一个类？

4

10 回答 10

5

尝试

$(document).ready(function() {
  $('.item:first-child').addClass('first');
});
于 2012-10-09T10:44:53.077 回答
5

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

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

});
于 2012-10-09T10:46:27.033 回答
3

<script></script>您的代码是正确的，但它是在 DOM 准备好之前执行的，请将</body>.

要将类添加到其余元素中，您可以这样做（来自 VisioN 的评论）

$(".item:not(:first,:last)").addClass("differentClass");
于 2012-10-09T10:45:54.093 回答
2 
$(".item :first").addClass('first');
于 2012-10-09T10:45:16.380 回答
2

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

一旦完全构建了 DOM 层次结构，就可以运行该脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。

阅读有关 $(document).ready() 的更多信息。

检查下面的代码。它会帮助你完成你想做的事情。

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

否则，您的 js 甚至在加载 DOM 之前就已运行

$(".item:first").addClass('first');也可以正常工作。

也试试演示。

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

于 2012-10-09T10:52:29.177 回答
2

你用这个代码

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

or
  $("div:first-child").addClass("anyclass");
于 2012-10-09T10:58:59.017 回答
2

这是jQuery代码

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

问候， http://www.santoshkori.com

于 2012-10-10T10:55:22.277 回答
1

在这里看到jsfiddle

$(document).ready(function() {
    $('div:first').addClass('first');
});
于 2012-10-09T10:50:24.247 回答
1

试试这个

JS代码

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

演示

笔记

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

于 2012-10-09T10:52:35.620 回答
1

你总是可以直接使用 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');
于 2012-10-09T10:56:15.303 回答