Как изменить родителя к тому, что текст ребенка в JQuery

Question

У меня есть HTML-страницу с несколькими вхождениями описаний, которые не гиперссылками, сопровождающихся явной гиперссылки, например, так:

<h2 class="description">Awesome website!</h2> 
<p><a href="http://www.google.com/">http://www.google.com/</a></p> 

Когда экран становится ниже определенного размера, я хочу (1) явную ссылку уйти и (2) описание стать гиперссылкой. В качестве промежуточного шага, я просто хочу, чтобы изменить h2, чтобы текст a, но это не работает:

$(window).resize(function() { 
    if ($(window).width() < 500) { 
     $(".description").text($(this).siblings("p").find("a").text()); 
     $("a").hide(); 
    } else { 
     $("a").show(); 
     // replace the description, too 
    } 
}); 

Я попытался набрать в немного больше, и обнаружили, что это не даже работа:

$(window).resize(function() { 
    if($(window).width() < 500) { 
     $(".description").text($(this).text()); // the description disappears 
    } 
}); 

даже если console.log($(".description").text()); дает мне текст, связанный с description.

Я предполагаю, что текст, который я хочу использовать, исчезает, прежде чем его можно будет использовать.

Есть ли обходной путь или правильный способ сделать это? Я знаю, что могу гиперссылку на оба и удалить/восстановить гиперссылку по мере изменения размера экрана, но мне интересно, может ли что-то вроде того, что я пытаюсь, работать.

Answer 1

$(window).resize(function() { 
     if ($(window).width() < 500) { 
      // Traverse all .description 
      $(".decription").each(function(){ 

       // Fetch the next a tag inside the next p 
       $el_a = $(this).next("p").find("a")[0]; 

       // Fetch it's href and hide it 
       var href = $el_a.href; 
       $el_a.hide(); 

       // Build new html for description by wrapping it in <a></a> with previous href. 
       $(this).html(function(){ 
        return '<a href="'+$el_a.html()+'">'+this.innerHTML+'</a>'; 
       }); 
      }); 
     } else { 
      $(".decription").each(function(){ 

       // Fetch the next a tag inside the next p 
       $el_a = $(this).next("p").find("a")[0]; 

       // Show this element 
       $el_a.show(); 

       // Modify the html by setting its html as the html of its children a 
       $(this).html(function(){ 
        return $(this).children("a").html(); 
       }); 
      }); 
     } 
    }); 

Answer 2

var $el = $(".description"), 
 
    $sib = $el.siblings('p'), 
 
    desc = $el.text(), // h2 text 
 
    rdesc = $sib.text(); // a text 
 

 
console.log(desc, rdesc) 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < 500) { 
 
    $(".description").text(rdesc); // replace h2 text if < 500 
 
    $sib.hide() // hide p 
 
    } else { 
 
    $(".description").text(desc); // replace h2 text if != < 500 
 
    $sib.show() // show p 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h2 class="description">Awesome website!</h2> 
 
<p><a href="http://www.google.com/">Google Link</a> 
 
</p>

проверить эту скрипку с изменением размеров: - https://jsfiddle.net/toopbbLr/