Question

我有多个名为h_block的外部div包含名为h_block_intro的内部div，我想在每个h_block div中为第一个内部div设置底部边框但是它仅适用于第一个div http://jsfiddle.net/2GkW8/

HTML 文字

<div class="h_block_intro">
 text   
</div>
<div class="h_block_intro">
 text   
</div>

<div class="h_block_intro">
 text   
</div>
</div>
<div class="h_block">
<div class="h_block_intro">
 text   
</div>

<div class="h_block_intro">
 text   
</div>
<div class="h_block_intro">
 text   
</div>

<div class="h_block_intro">
 text   
</div>
</div>

js（内部文件准备好）

$(".h_block .h_block_intro:eq(0), .h_block .h_block_intro:eq(1)").each(function(){
    $(this).css("border-bottom","1px dashed #952BE8");
});

CSS

.h_block{
width:160px; height:122px; float:left; border:1px solid red; margin-left:10px;
}
.h_block_intro{
width:160px; height:30px; float:left; background-color:orange;
}

Answer 1

将您的javascript函数转换为：

$(".h_block").find(".h_block_intro:eq(0)").css("border-bottom","1px dashed #952BE8");

这是小提琴：http://jsfiddle.net/2GkW8/12/

Answer 2

您使用它们时的索引值是绝对值：

http://jsfiddle.net/isherwood/2GkW8/4

为了进一步证明，我已经打破了你的方法以使其发挥作用：

http://jsfiddle.net/isherwood/2GkW8/8

$(".h_block").find(".h_block_intro:eq(0)")
    .css("border-bottom", "1px dashed #952BE8");

Answer 3

$(".h_block .h_block_intro:nth-child(0), .h_block .h_block_intro:nth-child(1)").each(function(){
    $(this).css("border-bottom","1px dashed #952BE8");
});

点击此处http://jsfiddle.net/2GkW8/2/

Answer 4

我不知道上下文，但你考虑过CSS伪选择器吗？

您可以使用

.h_block_intro:first-child {
    border-bottom: 1px dashed #952BE8;
}

喜欢这个http://jsfiddle.net/2GkW8/16/

每个人都没有像我想象的那样工作

4 个答案: