jquery - 根据屏幕大小添加和删除 wrapInner

Question

我正在尝试根据屏幕尺寸添加和删除 wrapInner 。这可能吗？

$(window).resize(function() {
    if (window.innerWidth < 768) {

        $('.homeNewsHeading > h3').wrapInner('<a href="#text" class="newcss" />');

    } else if (window.innerWidth > 768) {

    // How do I Remove the above wrapInner a-tag from the h3-tag?

    }
}).resize();

Answer 1

尝试

$(window).resize(function() {
    if (window.innerWidth < 768) {
        $('.homeNewsHeading > h3').wrapInner('<a href="#text" class="newcss" />');
    } else if (window.innerWidth > 768) {
        $('.homeNewsHeading > h3').find('.newcss').children().unwrap();
    }
}).resize();

演示：小提琴

Answer 2

.innerWrap 在我缩小屏幕时起作用，.unwrap 在我放大屏幕时起作用，但仅在刷新时，而不是动态地。我不知道为什么，但只有这对我有用：

HTML

<div class="homeNewsHeading">
    <h3>Latest News</h3>
</div>

jQuery

$(window).resize(function() {
    if (window.innerWidth < 768) {

        $('.homeNewsHeading > h3').wrapInner('<a href="#text" class="newcss" />');

    } else if (window.innerWidth > 768) {

        $('.homeNewsHeading > h3').replaceWith('<h3>Latest News</h3>');

    }
})

Answer 3

$(window).resize(function() {
    if (window.innerWidth < 768) {

        $('.homeNewsHeading > h3').wrapInner('<a id="your-tag" href="#text" class="newcss" />');

    } else if (window.innerWidth > 768) {

        $('.homeNewsHeading > h3').text($('.homeNewsHeading > h3').text());

        $('#your-tag').remove();

    }
}).resize();

Answer 4

var appendsToggle = function(){

    var title = $('h2');

    if($(window).width() < 768){

        $(title).each(function(){
            if(!$(this).find('a').length)
                $(this).wrapInner('<a href="#"></a>');
        });

    }else{
        $(title).each(function(){
            if($(this).find('a').length)
                $(this).html($(this).find('a').html());
        });
    }
}
appendsToggle();
$(window).resize(appendsToggle);