如何将父对象更改为子对象'；JQuery中的文本

我有一个html页面，其中包含多个非超链接的描述，并伴有一个明确的超链接，如下所示：

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

我试着再拨一点，发现这根本不起作用：

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

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<500）{
$（“.description”）.text（$（this.text（））；//说明消失
}
});

即使

console.log（$（“.description”）.text（））

提供与

说明相关的文本

我猜我想用的文本在被使用之前已经不存在了

是否有解决方法或正确的方法来做到这一点？我知道，随着屏幕大小的变化，我可以同时超链接和删除/恢复超链接，但我想知道我正在尝试的方法是否可行。
$（窗口）。调整大小（函数（）{
$(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();
                });
            });
        }
    });

如果（$（窗口）.width（）<500）{
//遍历所有。描述
$（“.description”）。每个（函数（）{
//在下一个p中获取下一个a标记
$el_a=$（this）.next（“p”）.find（“a”）[0]；
//取下它的href并隐藏它
var href=$el_a.href；
$el_a.hide（）；
//通过将其包装在'，为描述构建新的html；
});
});
}否则{
$（“.description”）。每个（函数（）{
//在下一个p中获取下一个a标记
$el_a=$（this）.next（“p”）.find（“a”）[0]；
//显示此元素
$el_a.show（）；
//通过将html设置为其子项的html来修改html
$（this.html（function（））{
返回$（this.children（“a”）.html（）；
});
});
}
});

var$el=$（“.description”），
$sib=$el.sibbs（'p'），
desc=$el.text（），//h2 text
rdesc=$sib.text（）；//正文
console.log（desc，rdesc）
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<500）{
$（“.description”）.text（rdesc）；//如果小于500，则替换h2文本
$sib.hide（）//隐藏p
}否则{
$（“.description”）.text（desc）；//如果！=<500，则替换h2文本
$sib.show（）//show p
}
});

很棒的网站！

你不使用媒体查询有什么原因吗？我想你对
这个
有一个误解，除了无知之外，我想——我不太熟悉CSS更复杂的特性。我没有意识到你实际上可以用媒体查询替换文本。@itamar，我用display:hidden解决了如何用媒体查询替换文本的问题。谢谢你的指点。
$(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();
                });
            });
        }
    });