时间戳

首页 > 解决方案 > 将具有相同文本的 SPAN 删除到 DOM 元素数组中

javascript - 将具有相同文本的 SPAN 删除到 DOM 元素数组中

问题描述

所以我有一个 DOM 元素数组，基本上，一堆来自 API 的标签可以重复甚至三份，我需要做的是从 dom 中删除所有重复项，只保留一个跨度。在从 DOM 中删除重复元素 (SPANS) 之前，我必须基本上删除所有空格并将它们转换为小写，因为我有以下情况：

<span class="tag">Wildz</span>
<span class="tag">German</span>
<span class="tag">wilds</span>
<span class="tag">W ilds</span>

在这种情况下，想法是删除所有重复项并只留下一个。请注意，我无法按类删除元素，因为有其他元素无法使用相同的类名（例如德语）删除。

const incomingChatTags = $(incomingChat).find('.tag').toArray();
//Transforming to Lowercase and removing blank space
incomingChatTags = incomingChatTags.map(tag => tag.text().toLowerCase.replace(/ /g,''))

这种方法的问题是我的incomingChatTags 数组现在是一个字符串数组而不是DOM 元素数组，所以我可以循环遍历数组并遍历dom 并删除元素。我需要每个文本只有一个标签才能执行以下操作：

for (let k = 0; k < incomingChatTags.length; k++) {
      const normalHolderTag = $(incomingChatTags[k]);
      switch (normalHolderTag) {
        case 'accountclosure':
          $(incomingChatTags[k]).addClass('ce-accountclosure');
          $(incomingChatTags[k])
            .closest('div')
            .prepend($(incomingChatTags[k]));
          priorityVal += 200;
          break;
        case 'rg':
          $(incomingChatTags[k]).addClass('ce-rg');
          priorityVal += 240;
          $(incomingChatTags[k])
            .closest('div')
            .prepend($(incomingChatTags[k]));
          break;
        case 'vip':
          $(incomingChatTags[k]).addClass('ce-vip');
          $(incomingChatTags[k])
            .closest('div')
            .prepend($(incomingChatTags[k]));
          priorityVal += 300;
          break;
        case '21com': {
          const logo21 = chrome.extension.getURL('/images/21_thumb.png');
          $(incomingChatTags[k]).html(`<img src="${logo21}" />`);
          $(incomingChatTags[k]).addClass('ce-tag-logo');
          break;
        }
        default:
          break;
      }    
}

任何想法都将不胜感激我尝试了不同类型的方法，但几乎所有案例都处理字符串数组而不是 dom 元素数组。

根据@Zohir 的要求，这是真正的 HTML 结构，当我有重复标签的部分是带有“visitorlist_tags”类的部分：

<div class="meshim_dashboard_components_visitors_visitorList_renderers_Incoming">
    <div class="visitor_table" data-test-id="incomingVisitor">
        <div class="jx_ui_html_div name_cell" data-test-id="nameCell">
            Natewillis925
        </div>
        <div class="icons_cell" data-test-id="iconsCell">
            <div class="meshim_dashboard_components_widgets_Browser">
                <div class="jx_ui_html_div browser Chrome" data-test-id="browserIcon"></div>
            </div>
            <div class="meshim_dashboard_components_widgets_Platform">
                <div data-test-id="platformIcon"></div>
            </div>
            <div class="meshim_dashboard_components_widgets_CountryFlag">
                <div class="jx_ui_html_div flag flag-nz" data-test-id="countryFlagIcon"></div>
            </div>
        </div>
        <div class="jx_ui_html_div icons_cell"></div>
        <div class="jx_ui_html_div time_cell" data-test-id="timeCell">
            2 mins
        </div>
        <div class="jx_ui_html_div numbers_cell" data-test-id="chatsCell">
            -
        </div>
        <div class="jx_ui_html_div numbers_cell" data-test-id="visitsCell">
            2
        </div>
        <div class="jx_ui_html_div page_cell referrer_cell" data-test-id="referrerCell">
            <div class="meshim_dashboard_components_visitors_visitorList_renderers_SearchEngine search_engine"></div>
            <span class="jx_ui_html_span">newfreespinsnodeposit.com</span>
        </div>
        <div class="jx_ui_html_div page_cell">
            <span class="jx_ui_html_span number_tag" data-test-id="viewingNumber">1</span>
            <span class="jx_ui_html_span" data-test-id="viewingPage">Justspin.com</span>
        </div>
        <div class="jx_ui_html_div" data-test-id="lastMsgCell">
            How do I get my no deposit 100 freespins on firejoker
        </div>
    </div>
    <div class="meshim_dashboard_components_visitors_visitorList_VisitorTag visitorlist_tags">
        <span class="jx_ui_html_span">
            <span class="tag" style="display: inline-block;">English Support</span>
        </span>
        <span class="jx_ui_html_span"></span>
        <span class="jx_ui_html_span">
            <span class="tag">justspin</span>
            <span class="tag">justspin</span>
            <span class="tag">justspin</span>
            <span class="tag">english</span>
        </span>
    </div>
</div>

标签： javascripthtmljquerycss

解决方案

就像一个想法：

  • 循环遍历 DOM 元素
  • 将规范化的内部文本保存到数组
  • 检查每个元素，如果规范化的内部文本已经在数组中
  • 如果是，则删除 DOM 元素

正如我所看到的，您可以在开头的示例 for 循环中进行此检查。

-- 更新示例 --

根据您的评论，我认为您必须从另一边完成任务：只需检查您的循环宽度存储阵列。假设调用一个函数normalize来删除空格，它应该是这样的：

let usedTags = []; // storage array

for (let k = 0; k < incomingChatTags.length; k++) {
  var holderTag = $(incomingChatTags[k]);

  // remove spaces, lower case etc.
  var normalHolderTag = normalize(holderTag);

  // check if we run into this tag before
  if($.inArray(normalHolderTag, usedTags) > -1) {
    continue;
  }

  // add the tag to the storage array
  usedTags.push(normalHolderTag);        

  // here goes your code      
  switch (normalHolderTag) {
    case 'accountclosure':
      $(incomingChatTags[k]).addClass('ce-accountclosure');
      $(incomingChatTags[k])
        .closest('div')
        .prepend($(incomingChatTags[k]));
      priorityVal += 200;
      break;
    case 'rg':
      $(incomingChatTags[k]).addClass('ce-rg');
      priorityVal += 240;
      $(incomingChatTags[k])
        .closest('div')
        .prepend($(incomingChatTags[k]));
      break;
    case 'vip':
      $(incomingChatTags[k]).addClass('ce-vip');
      $(incomingChatTags[k])
        .closest('div')
        .prepend($(incomingChatTags[k]));
      priorityVal += 300;
      break;
    case '21com': {
      const logo21 = chrome.extension.getURL('/images/21_thumb.png');
      $(incomingChatTags[k]).html(`<img src="${logo21}" />`);
      $(incomingChatTags[k]).addClass('ce-tag-logo');
      break;
    }
    default:
      break;
  }    
}

也许我的问题错了，但这似乎对我有用。

推荐阅读