多容器事件列表中，如何隐藏与开始日期相同的结束日期？

问题场景 #

页面包含多个事件容器（.container-1、.container-2……），每个容器结构如下：

<div class="container-1">
  <div class="start-date">October 19th 2022</div>
  <div class="date-sep">-</div>
  <div class="end-date">October 19th 2022</div>
</div>

需求：当同一容器内的.end-date文本与.start-date文本相同时，隐藏该.end-date（可同时隐藏分隔符优化显示）。

原代码的问题 #

你当前的实现存在3个核心问题：

• 给所有.start-date设置同一个id="startDate"，HTML规范中id必须唯一，这会导致仅第一个.start-date的文本被获取
• :contains(' +++ samedate +++ ')是错误的字符串拼接语法，无法正确插入变量值
• 未针对单个容器独立处理，会错误匹配所有容器中包含目标日期的.end-date，而非当前容器内的元素

正确实现方案 #

jQuery 代码 #

(function($) {
  // 遍历所有以container-开头的事件容器（适配任意编号的容器）
  $('[class^="container-"]').each(function() {
    var $currentContainer = $(this);
    // 获取当前容器内的日期文本，trim()去除前后空格避免判断误差
    var startDateText = $currentContainer.find('.start-date').text().trim();
    var endDateText = $currentContainer.find('.end-date').text().trim();

    // 比较日期文本，相同则隐藏结束日期和分隔符
    if (startDateText === endDateText) {
      $currentContainer.find('.end-date, .date-sep').addClass('hide-date');
    }
  });
})(jQuery);

CSS 代码 #

保留你现有的样式即可：

.hide-date { 
  display: none; 
}

代码说明 #

• 使用each()遍历每个容器，确保每个事件的日期判断独立，不会互相干扰
• 通过find()在当前容器内查找子元素，避免跨容器匹配错误的日期元素
• trim()处理文本前后的空格，防止因空格导致的日期匹配失败
• 可选同时隐藏.date-sep，让单个日期的显示更简洁美观

内容的提问来源于stack exchange，提问作者CliffVandyck