我里面有简单的 html 我有一个父 div 和它有 3 个子 div，每个子包含一个相同的 headinig 标签“h3” 我想在 h3 标签中添加 10px 填充，不包括第一个标签而不与 html 交互。例如第一个 h3= padding top=0;第二个 h3= padding top=10px;第三个 h3= padding top=20px;
<style>
.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}
.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}
</style>
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){
//code
})
</script>
</head>
<body>
<div class="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3 style="padding-top:10px;">second</h3></div>
<div class="box"><h3 style="padding-top:20px;">third</h3></div>
</div>
</body>
最佳答案
$('.main h3:not(:first)').css('paddingTop', '10px');
演示:http://jsfiddle.net/ambiguous/f3fmC/
如果还有其他<h3>在.main而你只对里面的那些.box感兴趣，然后调整选择器:
$('.main .box:not(:first) h3').css('paddingTop', '10px');
演示:http://jsfiddle.net/ambiguous/DYTmL/
如果你想使用递增的padding-top , 遍历 <h3>与 each :
$('.main h3:not(:first)').each(function(i) {
$(this).css('paddingTop', (i + 1) * 10);
});
演示:http://jsfiddle.net/ambiguous/QuyWj/
或者更简单:
$('.main h3').each(function(i) {
$(this).css('paddingTop', i * 10);
});
关于jquery - 通过jquery在标题标签中添加填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9765040/