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

Question

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

在示例中，这些应该只是第一个和第三个 div(因为第一个 .event 是第一个带有 a 且文本为 first 的 div event，第三个 .event 是第一个带有 a 的 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>

Answer 1

我不太确定您当前的逻辑正在尝试做什么，但它在几个方面存在缺陷。

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

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

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

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>