从同一类中选择第一个子元素并添加一个类名

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-content的第一个tab-pane上添加类active？

- Nodos

Answer 1

你可以这样做：

你可以这样做

JSFiddle

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

---

您也可以使用更具体的选择器来完成此操作：

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

- Smern

---

@Anubhab我们的回答也可以……这不是唯一有效的答案。因此他可以接受我的回答或Anubab的答案。有人对投票结果感到愤怒。 - amanuel2

@AmanuelBogale，多个可行答案并不意味着应该给一个踩。而且，这是第一个可行的答案。有人在乱搞 :) - Smern

@AmanuelBogale，是的，但最初提出问题的用户显然从他的评论中解决了他的问题！这是他的决定。 - Anubhab

这真是有趣...不过，这并不是很重要；当有人毫无理由地给出负评时，我只是会感到好奇罢了。 - Smern

Answer 2

如果你想要添加到两个 tab-content 类的第一个 tab-pane 中 - 你可以这样做

$('.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 - 然后选择必要的子级。

- Anubhab

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>

你可以看到它们都在类tab-content中。所以，你可以用jQuery选择它，然后找到class .tab-pane的子元素，再找到第一个子元素，最后添加类Active！

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

并且在CSS中...

.active{
color:blue
}

片段

$(".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所说的那样...

你改成了each循环，但是你没有使用this，而是在tab-content中多次设置第一个tab-pane...而不是针对每个tab-content

- amanuel2

---

你改成了一个each循环，但是你没有使用this，而是多次设置了第一个tab-pane在tab-content中... 而不是为每个tab-content设置。 - Smern

是的，我刚刚注意到了。对不起，@smerny，我错了。不过我已经更改了它，并做了一个注释。 - amanuel2