Question

大家好，所以我有4组列表，并希望为每个部分的第一部分设置活动类，但目前我的JS当然只设置第一个而不做其他的，任何想法如何我可以先排序每个DL吗？

标记示例：

<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");

Answer 1

使用first-child选择器代替first：

first（） - 将匹配元素集减少到集合中的第一个元素。

和

：first-child - 选择所有父元素的第一个子元素。

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

Answer 2

您也可以使用如下：

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

DEMO

Answer 3

尝试

＆＃13;

$('.faqs').find('.content:first').text('found')

＆＃13;

.faqs {
  border: 1px solid red;
  margin-bottom: 5px;
}

dd {
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 5px;
}

＆＃13;

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

＆＃13;

jQuery设置first（）但多次

3 个答案: