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