javascript - 通过 jquery 或 spath 选择器从 html 标签列表中选择特定的 html 标签

Question

使用这个 html 结构:

...
<div class="a">April 2018</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I want get this tag (and its children) --> 
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="d">...</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="d">...</div> <!-- I don't want get this tag ! -->
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
...

我想将类为“c”的第一个 div 元素的列表保存在数组中，该列表位于类为“d”的第一个 div 元素之前。我如何通过 jquery 选择器或 xpath 选择器来做到这一点？我不知道怎么做..

谢谢:)

Answer 1

1. 您可以使用.prevAll()
2. 使用 .eq() 选择第一个类为 d 的元素，然后使用 .prevAll() 获取所有先前的类为 c 的元素

$('.d').eq(0).prevAll('.c').css('color','red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">April 2018</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I want get this tag (and its children) --> 
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="c">...</div> <!-- I want get this tag (and its children) -->
<div class="d">...</div>
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="d">...</div> <!-- I don't want get this tag ! -->
<div class="b">Monday 02</div>
<div class="c">...</div> <!-- I don't want get this tag ! -->
<div class="c">...</div> <!-- I don't want get this tag ! -->