jquery – 查找包含相同文本的每组div的第一个实例

我正在尝试仅在每组div中的第一个.event上设置CSS,其中包含一个具有相同文本的a.

在示例中,这些应该只是第1和第3个div(因为第一个.event是第一个带有文本第一个事件的div,第三个.event是带有文本第二个事件的第一个div.) .

我试过这段代码但是没有用：

jQuery(document).ready(function($) {
  var eventitle = $(".event .title a").text();
  $(".event .title a:contains(" + eventitle + ")").each(function() {
    var parenter = $(this).closest(".event");
    $(parenter).first().css("color", "red");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>

我不太确定你目前的逻辑是怎么做的,但它在几个方面存在缺陷.

鉴于元素的文本已经按顺序排列,实现所需要的最简单方法是将前一个元素的文本与循环中的当前元素进行比较.如果它们不同,那么您可以添加类来更改文本的颜色,如下所示：

var prevText = '';
$('.event .title a').each(function() {
  var text = $(this).text().trim();
  $(this).closest('.event').toggleClass('foo', prevText != text);
  prevText = text;
});

.foo a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>

请注意,对于要由父元素上的类实际更改的a的文本,您需要将CSS选择器显式设置为.event a.

更新：

Thanks, but the div can be ordered not one after the other. They can be spread around the loop

在这种情况下,您可以使用数组来维护已经遍历过的元素的文本列表.如果数组不包含当前元素的文本,请添加该类.

var titles = [];
$('.event .title a').each(function() {
  var text = $(this).text().trim();
  if (titles.indexOf(text) == -1) {
    $(this).closest('.event').addClass('foo');
    titles.push(text);
  }
});

.foo a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">first event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">third event</a>
  </div>
</div>
<div class="event">
  <div class="title">
    <a href="#">second event</a>
  </div>
</div>