根据屏幕大小添加和删除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 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);