Question

我想使用辅助类删除重复的span.film-date元素。例如，我只想保留第一个跨度的类别为“电影日期星期三五月29日”，而第一个跨度的类别为“电影日期星期三五月30日”。

<div class="film-time-list">
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
<span class="film-date Thur30May">Thur 30 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Thur30May">Thur 30 May</span>
<a class="film-tickets" href="#">5.20pm</a>
</div>

我认为这很简单，但是由于动态输出的类可能是该代码段不起作用的任何日期，这是我最初的想法。

$('.couldBeAnyClass').not(':first').remove();

任何指针都很棒！

我的输出将是：

Wed 29 May 2.30pm 5.20pm
Thur 30 May 2.30pm 5.20pm

Answer 1

要实现所需的功能，您可以遍历span元素，检查文本是否与前一个元素相同，如果是，请将其删除：

var prev;
$('.film-time-list span').each(function() {
  var text = $(this).text().trim();
  if (prev == text)
    $(this).remove();
  
  prev = text;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
</div>

Answer 2

首先，我将通过基类获取所有元素。然后，我将加入这些元素的完整类，并删除所有重复项。

d<-data.frame(c(1,5,7,5,4,5,6,7,8,9,10,15,13))
x <- list(
  tick0=0,
  dtick=5

)

# Create the plotly histogram

plot_ly(alpha = 0.9) %>%
  add_histogram(x = as.factor(d[,1]),source="subset") %>%
  # Add titles in plot and axes
  layout(barmode = "overlay",xaxis=x,margin=list(b=100))

;window.onload = function(){
  //REM: Looping through all .film-date elements
  for(var tListOfSpans = document.querySelectorAll('.film-date'), i=tListOfSpans.length-1; i>=0; i--){
    var tSelector = '.' + tListOfSpans[i].className.split(' ').join('.');

    //REM: Removing all but the first .film-date plus whatever class elements but the first
    for(var tListOfSelects = document.querySelectorAll(tSelector), j=tListOfSelects.length-1; j>0; j--){
      tListOfSelects[j].parentNode.removeChild(tListOfSelects[j])
    }
  }
};

编辑：

问题的HTML发生了更改。因此，我相应地更换了我的。

Answer 3

这应该做到！由于相应的anchor元素不是span元素的一部分，除非将它们附加到要删除的元素上，否则它们不会被删除：

$(this).append( $(this).next() ).remove();

$(function() {
  var prevClass;
  $('span.film-date').each(function() {
    var index = $(this).index();
    if( index ) {
      if( this.className === prevClass ) {
        $(this).append( $(this).next() ).remove();
      } else {
        prevClass = this.className;
      }
    } else {
      prevClass = this.className;
    }
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="film-time-list">
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
</div>

在span元素不按顺序排列的情况下，可以使用以下内容：

$(function() {
  var prevClass = [];
  $('span.film-date').each(function() {
    var index = $(this).index();
    if( index ) {
      if( $.inArray(this.className, prevClass) !== -1 ) {
        $(this).append( $(this).next() ).remove();
      } else {
        prevClass.push( this.className );
      }
    } else {
      prevClass.push( this.className );
    }
  });
});

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <div class="film-time-list">
      <span class="film-date Wed29May">Wed 29 May</span>
      <a class="film-tickets" href="#">2.30pm</a>
       <span class="film-date Thur30May">Thur 30 May</span>
      <a class="film-tickets" href="#">2.30pm</a>
     <span class="film-date Wed29May">Wed 29 May</span>
      <a class="film-tickets" href="#">5.20pm</a>
      <span class="film-date Thur30May">Thur 30 May</span>
      <a class="film-tickets" href="#">5.20pm</a>
    </div>

Answer 4

使用集合，因此不必订购。考虑日期是传递给html元素的第二类。

const dateSet = new Set();
$(".film-date").each((idx, el) => {
  if(dateSet.has(el.classList[1])) { el.remove(); }
  else { dateSet.add(el.classList[1]); }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
<span class="film-date Thur30May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Thur30May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
</div>

使用JQuery按类删除重复的元素

4 个答案:

编辑：