时间戳

首页 > 解决方案 > JQuery删除限制在外部容器中的重复项

jquery - JQuery删除限制在外部容器中的重复项

问题描述

我正在使用 jQuery 删除跨度内文本内容的任何重复项，因为我只想要外部 .film-time-list 中的“我的电影”的第一个实例，并且希望删除重复项的跨度。然而，jQuery 正在删除下一级 .film-time-list 中的所有内容，因为它显然也将其视为重复项。我玩过 .closest() 但没有乐趣。

我越来越：

2019 年 7 月 20 日星期六

我的电影 12.00pm 13.00pm

2019 年 7 月 21 日星期日

12.00pm 13.00pm（此处缺少标题）

但我想要：

2019 年 7 月 20 日星期六

我的电影 12.00pm 13.00pm

2019 年 7 月 21 日星期日

我的电影 12.00pm 13.00pm

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){         
  var prev;
  $('.film-time-list span').each(function() {
  var text = $(this).text().trim();
  if (prev == text)
      $(this).remove();
      prev = text;
  });
});         
</script>
</head>
<body>
    <div class="film-time-list">
        <h3>Sat 20 Jul 2019</h3>
        <br>
        <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
       <br>
       <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
<br>
</div>  
 <div class="film-time-list">
        <h3>Sun 21 Jul 2019</h3>
        <br>
        <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
       <br>
       <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
       </div>
       <br>
    </div>  
  </body>
</html>

标签： jquery

解决方案

您可以使用 use :first-of-type selector plus .appendTo()（更新的 jsfiddle 在这里）：

$('.film-time-list .container:first-of-type').each(function () {
    var next = $(this).nextAll('.container');
    if ($(this).find('span').text().trim() == next.find('span').text().trim()) {
        next.find('a:last').appendTo(this);
        next.remove();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
    <h3>Sat 20 Jul 2019</h3>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">12.00pm</a>
    </div>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">13.00pm</a>
    </div>
    <br>
    <br>
</div>
<div class="film-time-list">
    <h3>Sun 21 Jul 2019</h3>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span><a class="#">12.00pm</a>
    </div>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">13.00pm</a>
    </div>
    <br>
</div>

推荐阅读