javascript - JS中如何去除多余的元素内容?

标签 javascript jquery html dom attributes

我正在编写下面的 html 代码,即将进行检查。在下面的 class="schedule-wrapper" 代码中有一个属性 data-timezone 其值为 "et"。单击按钮时,data-timezone 属性值会发生变化,如下面的屏幕截图所示。单击按钮时(PTMTCTETATNT),页面刷新不会发生。

enter image description here

<div class="schedule-wrapper" id="js-schedule" data-timezone="et">         /* The value of data-timezone attribute changes on button click from the Screenshot below */ 

   <!-- List of button start -->
   <div class="schedule-action-bar">
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-ct" class="" data-timezone="ct">CT</button>
            </li>
            <li>
               <button id="js-time-et" class="" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
    </div>
    <!-- List of button end -->

    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
              <time datetime="02:45 24-07-2019" data-timezone="ct">July 24  02:45</time>
               <time datetime="03:45 24-07-2019" data-timezone="et">July 24  03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
              <time datetime="04:00 24-07-2019" data-timezone="ct">July 24  04:00</time>
              <time datetime="05:00 24-07-2019" data-timezone="et">July 24  05:00</time>            /* When timezone is eastern standard time */
        </div>
    </div>
   <!-- .schedule-show -->

</div>

问题陈述:

我想知道我需要添加什么Javascript代码,以便我们可以隐藏(或隐藏/使视觉上不那么突出)当值与上一行含义相同时的日期 不在日期与前一行相同的行上显示某一天,以便按日期出现视觉中断。

简而言之,正如上面的屏幕截图中提到的,我不希望该日期用圆圈标记。

最佳答案

I made a fiddle here

// we have to iterate backwards... actually maybe we don't..
$($('.schedule-show').get().reverse()).each(function(i, div){
  let time = $(div).find('[data-timezone="et"]')
  let nextTime = $(div).find('+ .schedule-show [data-timezone="et"]')
  if(nextTime[0]){
    // check if the dates match
    if(nextTime.text().match(/\w+ \d+/)[0] === time.text().match(/\w+ \d+/)[0]){
      // "white out" the dates that match
      nextTime.html(nextTime.text().replace(/(\w+ \d+)/, "<font color=\"white\">$1</font>"))
    }
  }
})

关于javascript - JS中如何去除多余的元素内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57205525/

相关文章:

javascript - jQuery 克隆和附加功能无法按 AngularJS 指令中的预期工作

javascript - jQuery FullCalendar 事件拖放在移动设备、选项卡中不起作用

javascript - 使用省略号设置下拉列表选项

jquery - AJAX 发布到谷歌电子表格

javascript - 理解和阅读 jQuery

jquery - 使用 jQuery 添加新项目到无序列表,没有 ID 且类太多

html - 对于没有相关替代文字的图像,是否有符合规范的做法?

javascript - 帮助编写正则表达式,仅在 <strong> 标签不存在时用 <strong> 标签包围某些文本

javascript - 将鼠标悬停在 div "rectange"上不起作用

html - CSS 从矩形中剪出圆形