css - 在列表中选择第一个类型的 div，所有类型的 div 都具有与其关联的状态的数据属性

Question

我有一个动态创建的元素列表，这些元素是处于特定状态的作业。每个州可以有不止一个工作，我试图选择每个州的第一个，但不仅仅是这个巨大列表中的第一个。例如:

<section class="careers">
<div data-state="career-illinois">...</div>
<div data-state="career-illinois">...</div>
<div data-state="career-illinois">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-ohio">...</div>
<div data-state="career-ohio">...</div>
</section>

我想(使用 js 或 css)只选择每个组的第一个状态。 我希望通过以下方式实现这一目标:

.careers div[class*="career-"]:nth-of-type(1) h2 {
  color: #636467;
}

但这没有用。我已经尝试了几种方法来使用 jQuery 来定位它，但没有成功。甚至不确定这是否可能？

Answer 1

一种方法是遍历 div 并跟踪您是否已经看到具有该数据属性的 div

var jobs = [];
$('section.careers div').each(function () {
    if ($.inArray($(this).data('state'), jobs) === -1) { // an element with this data attribute hasn't been encountered yet
        jobs.push($(this).data('state')); // Add the data attribute to our tracking array
        $(this).addClass('first')
    }
})

.first {
    color: #636467;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="careers">
    <div data-state="career-illinois">...</div>
    <div data-state="career-illinois">...</div>
    <div data-state="career-illinois">...</div>
    <div data-state="career-michigan">...</div>
    <div data-state="career-michigan">...</div>
    <div data-state="career-michigan">...</div>
    <div data-state="career-ohio">...</div>
    <div data-state="career-ohio">...</div>
</section>

或不: