如何使用jQuery获取数据中特定值的第一个实例

Question

正如标题所述，我希望获得数据-*中给属性的值的第一个实例。

例如：

<div class="row mt-2" data-group="1">
<div class="row mt-2" data-group="1">
<div class="row mt-2" data-group="2">
<div class="row mt-2" data-group="2">
<div class="row mt-2" data-group="3">
<div class="row mt-2" data-group="3">

假设我已经有了数据组中所有唯一值的列表。我如何能够指定具有"1“、"2”和"3“的第一个实例的div。这样做的目的是能够使用jQuery在每个唯一数据组的第一个实例之前添加一些内容。

Answer 1

您可以循环遍历每个data-group数字，并只选择组中的第一个：

​

for (let i = 1; i < 4; i++) {
  $(`[data-group=${i}]`).first().css("border", "blue solid 2px")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="groups"> <!-- or something -->
  <div class="row mt-2" data-group="1">Group 1</div>
  <div class="row mt-2" data-group="1">Group 1</div>
  <div class="row mt-2" data-group="1">Group 1</div>
  <div class="row mt-2" data-group="2">Group 2</div>
  <div class="row mt-2" data-group="2">Group 2</div>
  <div class="row mt-2" data-group="3">Group 3</div>
  <div class="row mt-2" data-group="3">Group 3</div>
  <div class="row mt-2" data-group="3">Group 3</div>
  <div class="row mt-2" data-group="3">Group 3</div>
</div>

​

Answer 2

您可以将它与任何字符串一起使用，这样您就不必循环并使用迭代数。

这将过滤包含所有.mt-2元素的jquery对象，而这些元素本身之前没有具有相同数据组的元素。

.prevAll()获取与给定选择器匹配的所有以前的sibbling。

​

$('.mt-2').filter((i, el) => {
  return !$(el).prevAll(`[data-group="${$(el).data('group')}"]`).length;
}).css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row mt-2" data-group="some string1">1</div>
<div class="row mt-2" data-group="some string1">1</div>
<div class="row mt-2" data-group="some string2">2</div>
<div class="row mt-2" data-group="some string2">2</div>
<div class="row mt-2" data-group="some string2">2</div>
<div class="row mt-2" data-group="lalala">lala</div>
<div class="row mt-2" data-group="lalala">lala</div>
</div>

​