Select 列表中的第一个 div 类型，它们都具有与其关联的州的数据属性

Question

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

<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）select 只是每个组的第一个状态。我希望通过以下方式实现这一目标：

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

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

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>

与否：

Select 列表中的第一个 div 类型，它们都具有与其关联的州的数据属性

Select the first-of-type div in a list that all have a data-attribute for the state it's associated with

css

css-selectors

jquery-selectors