Selecting from same class the first child and adding a class name

Question

I have two classes with nested content, ex:

<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>

How do I add the class active on the first tab-pane for each tab-content?

Answer 1

You could do this

JSFiddle

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

---

Could also do this with a more specific selector:

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

Answer 2

If you want to add to the first tab-pane of both the tab-content classes - you could do

$('.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 
});

Basically looping over each of your class .tab-content - then selecting necessory child.