Question

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

在该示例中，这些值应该仅是第一个和第三个div（因为第一个.event是带有文本a的{{1}}和第三个{{ 1}}是包含first event和文本.event的{{1}}的div中的第一个。

我尝试了这段代码，但是没有用：

second event

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。

更新：

谢谢，但是div不能一个接一个地排序。它们可以在循环中传播

在这种情况下，您可以使用数组来维护已经遍历的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>

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

1 个答案: