Question

我有两个嵌套内容的类，例如：

<div class="tab-content">
  <div class='tab-pane'></div>
  <div class='tab-pane'></div>
</div>

<div class="tab-content">
  <div class='tab-pane'></div>
  <div class='tab-pane'></div>
</div>

如何为每个tab-pane的第一个tab-content添加有效课程？

Answer 1

你可以这样做

JSFiddle

$(".tab-content").each(function() {
  $(this).children(".tab-pane").first().addClass("active");
});

也可以使用更具体的选择器执行此操作：

$(".tab-content > .tab-pane:first-child").addClass("active");

Answer 2

如果您要添加到tab-pane类的第一个tab-content - 您可以

$('.tab-content').each(function(){
    $(this).find('.tab-pane').eq(0).addClass('active');//.first() instead of .eq(0) will also work. eq() just gives you more controll 
});

基本上循环遍历每个类.tab-content - 然后选择必需的子项。

Answer 3

<div class="tab-content">
<div class='tab-pane'></div>
<div class='tab-pane'></div>
</div>

 <div class="tab-content">
<div class='tab-pane'></div>
<div class='tab-pane'></div>
</div>

为此您可以看到所有这些都在类标签内容中。所以你可以通过jquery选择它然后找到类.tab-pane的子项，然后找到第一个子项，然后finnaly添加类Active！

$(".tab-content").each(function() {
    $(".tab-content").children(".tab-pane").first().addClass("active");
})

在css ..

.active{
color:blue
}

Snipet

$(".tab-content").each(function() {
  $(this).children(".tab-pane").first().addClass("active");
  //This wont work: $(".tab-content").children(".tab-pane").first().addClass("active");
  //You can check if you want..
});

.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">
  <div class='tab-pane'>1</div>
  <div class='tab-pane'>2</div>
</div>

<div class="tab-content">
  <div class='tab-pane'>1</div>
  <div class='tab-pane'>2</div>
</div>

你必须使用$（this）因为像@seammy所说的那样......

你改成了每个循环，但是你没有使用它，你是只需在选项卡内容中多次设置第一个选项卡窗格...... 而不是每个标签内容

从同一个班级中选择第一个孩子并添加一个班级名称

3 个答案:

Snipet