Question

<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个span元素的行上，如何删除除1之外的所有元素？我只想在每个元素之间加一个。

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

Answer 1

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

正如您所看到的，已删除连续的跨度，并且div之间只有一个x而不是三个： http://jsfiddle.net/samliew/KFMrU/

将上述元素包装在容器中并且仅在该容器中执行删除是一个好习惯。即：

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

Answer 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>

Answer 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;
}

jquery - 删除重复的连续元素

3 个答案:

正则表达式

CSS