Question

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

我得到：

2019年7月20日星期六

我的电影12:00 pm 13.00pm

2019年7月21日星期日

下午12.00下午13.00（此处缺少标题）

但我想要

：

2019年7月20日星期六

我的电影12:00 pm 13.00pm

2019年7月21日星期日

我的电影12:00 pm 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>

Answer 1

您可以使用:first-of-type选择器加.appendTo()（更新的jsfiddle是here）来使用

$('.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>

Answer 2

现在，您正在检查它们是否具有相同的文本。只需检查它们是否具有相同的文本和相同的父元素

$('.film-time-list span').each(function() {

    var prev;
    var prevDiv;

    var text = $(this).text().trim();

    if ( prev == text && $(this).parent() == prevDiv.parent() ))
    $(this).remove();
    prev = text;
    prevDiv = $(this);
    });

});   ```

jQuery删除仅限于外部容器的重复项

2 个答案: