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 id="your-tag" href="#text" class="newcss" />');

    } else if (window.innerWidth > 768) {

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

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

    }
}).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 href="#text" class="newcss" />');
    } else if (window.innerWidth > 768) {
        $('.homeNewsHeading > h3').find('.newcss').children().unwrap();
    }
}).resize();

演示：Fiddle

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);

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

4 个答案: