jQuery—应用于所有特定 class 中的第一个 div

Question

我有几个元素 class “.MonthAccordion”。我想将某些内容应用到每个 .MonthAccordion 的第一个 child div，但我所拥有的似乎只应用到第一个 MonthAccordion 的 child。随后的 MonthAccordions' children 不受影响。我要去哪里？

$(".MonthAccordion").children("div:first").show();

Answer 1

使用 .each() 方法迭代所有具有 'MonthAccordion' class 的元素。

   $('.MonthAccordion').each(function( index ) {
      $(this).children("div:first").show();
    });

Answer 2

仅 select 所有直系后代，并按 first-child

过滤

$(".MonthAccordion > div:first-of-type").show();

.MonthAccordion > * {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MonthAccordion">
  <h4>Something else</h4>
  <div>This one</div>
  <div>Not this one</div>
</div>

<div class="MonthAccordion">
  <div>This one</div>
  <div>Not this one</div>
</div>

你的问题是 jQuery first selects 只有中的 first 元素整个集合，而 first-child select 是每个 parent 元素中的第一个元素等

Answer 3

另一种使用 find() 方法实现的方法，它沿着 DOM 元素的后代向下遍历，一直向下遍历到最后一个后代：

$(".MonthAccordion").find("div:first").show();

.MonthAccordion > * {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MonthAccordion">
  <div>This one</div>
  <div>Not this one</div>
</div>

<div class="MonthAccordion">
  <div>This one</div>
  <div>Not this one</div>
</div>

jQuery—应用于所有特定 class 中的第一个 div

jQuery—apply to first div of all of a particular class

jquery

selector