Question

有一些元素包含在一个带有WordPress PHP固定链接和Fancybox日期类型的“a”标记中，如下所示：

<a href="<?php the_permalink(); ?>" class="example" id="exampleid" data-fancybox-type="iframe">
    <div class="exampledivclass">
    ... some images, some divs etc ...
    </div>
</a>

在小屏幕上，我想用带有类的“span”标签替换“a”标签。

我想使用此代码：

$(window).resize(function() {
    var wi = $(window).width();

    if (wi <= 480){

        CODE

        }
    else {

        CODE

    }
});

但我不知道如何替换“a”标签并撤消它。我遇到的问题：如何使用正确的固定链接重做“a”标记？

在jQuery中是否有“撤消你在if上做过什么”功能？

提前谢谢。

Answer 1

您可以使用replaceWith功能

例如：

$('a').replaceWith( "<span>" + $( this ).text() + "</span" );

或

$('a').replaceWith( "<span>" + $( this ).html() + "</span" );

或其他方式，您可以在提供的链接上阅读有关该文档的文档。

Answer 2

如果您正在处理一个简单的锚元素，那么

var ahtml = $('#exampleid').clone().empty().prop('outerHTML');
$(window).resize(function () {
    var wi = $(window).width();
    if (wi <= 480) {
        $('#exampleid').replaceWith(function () {
            return $('<span />', {
                id: this.id
            }).append(this.children);
        })
    } else {
        $('#exampleid').replaceWith(function () {
            return $(ahtml).append(this.children);
        })
    }
});

演示：Fiddle

jQuery - 响应式换行和解包/解包并撤消它

2 个答案: