jquery - 删除重复的连续元素答案

【问题标题】：jquery - remove duplicate consecutive elementjquery - 删除重复的连续元素
【发布时间】：2019-09-02 22:57:56
【问题描述】：

<div>something i need</div>

<span>x</span>

<div>something i need</div>

<span>x</span>

<div>something i need</div>

<span>x</span><span>x</span><span>x</span>

<div>something i need</div>

在我有 3 个跨度元素的行上，如何删除除一个之外的所有元素？我只想在每个元素之间放置一个。

编辑：使 html 正确，以便人们关注实际问题。

【问题讨论】：

这是错误的 html。你不能把<span>放在<li>之间
li 元素在哪里？
3个li元素在哪里
由于第一条评论，我将它们更改为跨度。一开始我并没有真正写出正确的html，考虑到我的问题与我的问题没有任何关系，我认为没有人会指出这一点。
看看stackoverflow.com/questions/2822962/…

标签： jquery

【解决方案1】：

$('span').each(function() {
    while($(this).prop('tagName') == $(this).next().prop('tagName'))
        $(this).next().remove();
});

如您所见，连续的 span 已被删除，在 div 之间只有一个 x 而不是三个：http://jsfiddle.net/samliew/KFMrU/

将上述元素包装在一个容器中是一种很好的做法，并且只在该容器中执行删除操作。即：

$('#myDiv span').each(function() {

【讨论】：

谢谢！我向跨度本身添加了类。像魅力一样工作！

【解决方案2】：

这里有小提琴：http://jsfiddle.net/SbpzY/

$('div').each( function() {
    if(!$(this).prev().hasClass('a'))
        $(this).remove();
});

将使用以下 html：

<span class="a">something i need</span>

<div>x</div>

<span class="a">something i need</span>

<div>x</div>

<span class="a">something i need</span>

<div>x</div><div>x</div><div>x</div>

<span class="a">something i need</span>

【讨论】：

天哪，我在结构中有 li 时开始工作，所以我必须创建自己的。

【解决方案3】：

正则表达式

假设 HTML 元素直接在<body> 中，那么正则表达式反向引用也可以去除连续重复，这里由 jQuery 提供便利：

const jqContainer = jQuery("body");
jqContainer
    .html(
        jqContainer
            .html()
            .replace(/(<span>[^<>]+<\/span>)+/g, "$1")
    )
;

注意：在这种情况下，正则表达式匹配所有包含文本的连续重复 <span> 元素，无论该文本是什么。如果您想将 <span> 与其中的特定文本匹配，则将 [^<>]+ 替换为要替换的文本，例如x

CSS

以下内容可能不适用于此上下文，但如果目标是删除连续重复元素以进行演示，并且如果 CSS 适用，则以下 CSS 将停止显示连续重复跨度：

span + span {
    display: none;
}

【讨论】：