CODEWITHSUNDEEP
jquery
James Brandon
James Brandon

Reputation: 1400

jQuery setting first() but multiple times

hi all so i have for example 4 sets of lists and want to set active class for the first of each section but at the moment on my JS of course just sets the first one and does not do the others, any ideas how i can sort so does first for each DL?

markup example:

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

JS

$(".faqs dl dd").first().addClass("active");
$(".faqs dl dd .content").first().addClass("active");

Upvotes: 0

Views: 35

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388416

Try

$('.faqs').find('.content:first').text('found')
.faqs {
  border: 1px solid red;
  margin-bottom: 5px;
}

dd {
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

<div class="faqs">
  <dl>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
    <dd><div class="content"></div></dd>
  </dl>
</div>

Upvotes: 0

Amit
Amit

Reputation: 15387

You can use as below also:

 $("div[class='faqs']>dl>dd:first-child").addClass("active");

DEMO

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

Use first-child selector instead of first as:

first() - Reduce the set of matched elements to the first in the set.

and

:first-child - Selects all elements that are the first child of their parent.

$(".faqs dl dd:first-child,.faqs dl dd:first-child .content").addClass("active");

Upvotes: 1

Related Questions