javascript 使用 jQuery 将一个类添加到第一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12798319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a class to first div using jQuery
提问by Zim3r
How to add a class to first div using jQuery.
如何使用 jQuery 将类添加到第一个 div。
I Tried following code but doesn't work for me. maybe I'm missing something.
我尝试了以下代码，但对我不起作用。也许我错过了一些东西。
<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>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
编辑：谢谢大家，无论如何要向其余的 DIV 添加一个类？
回答by Andy
try
尝试
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
回答by Peter Pajchl
You are executing the code before the markup is ready. Wrap the code in
您正在标记准备就绪之前执行代码。将代码包裹在
// document ready short-style
$(function() {
});
回答by Adi
Your code is correct, but it's executed before the DOM is ready, please move the <script></script>to the last line before </body>.
您的代码是正确的，但它在 DOM 准备就绪之前执行，请将 移动<script></script>到 之前的最后一行</body>。
To add a class to the rest of the elements you can do this (from VisioN's comment)
要将类添加到其余元素，您可以执行此操作（来自 VisioN 的评论）
$(".item:not(:first,:last)").addClass("differentClass");
回答by Darren
$(".item :first").addClass('first');
回答by Techie
your code should execute when the DOM is fully loaded. So use $(document).ready().
您的代码应该在 DOM 完全加载时执行。所以使用 $(document).ready()。
the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
一旦完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。
Read moreabout $(document).ready().
阅读有关 $(document).ready() 的更多信息。
check the code below. It will help you to get done what you want.
检查下面的代码。它会帮助你完成你想要的。
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
否则你的 js 甚至在 DOM 加载之前就运行了
$(".item:first").addClass('first');will work fine too.
$(".item:first").addClass('first');也能正常工作。
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
希望这会帮助你。如果您有任何问题，请随时提出。谢谢
回答by Saeed
u use this code
你用这个代码
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
回答by Santosh Kori
Here is the jQuery code
这是jQuery代码
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards, http://www.santoshkori.com
回答by Codegiant
回答by Phil
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
你总是可以直接使用 CSS，尽管它是 CSS3。例如，您可以将当前的 CSS 替换为：
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
如果您只想要 jQuery，那么您可以尝试：
$('.item:first').addClass('first');
$('.item:last').addClass('last');
