Jquery 单击获取列表p内容并显示在div中

jQuery有点问题，请帮助

单击class=“caption”时，我需要获取p class=“area desc”的内容，并将其显示在class=“step area”中

html:

计划
1从同一个角度来看，这是一个发展精英。从一个积累的角度来看，这是一个成功的机会。从不同角度来看，这是一个成功的机会


拱形结构
2从同一个角度来看，这是一个发展的精英。从不同角度来看，这是一个积累的财富。从不同角度来看，这是一个财富的财富。从不同角度来看，这是一个财富的财富


室内设计
3Lorem ipsum door sit amet，连续的发展精英。Curabitur a accumsan dolor。Curabitur rutum augue nec eros blandit egestas。Aliquam lobortis posuere facilisis。Integer rutrum ullamcorper erat ac tempor.null nec sapien nibh，non consequeq dui


建设
4Lorem ipsum door sit amet，连续的发展精英。Curabitur a accumsan dolor。Curabitur rutum augue nec eros blandit egestas。Aliquam lobortis posuere facilisis。Integer rutrum ullamcorper erat ac tempor.null nec sapien nibh，non consequeq dui

jQuery：

$('span.caption').click(function() {
        var step = $('p.area-desc').html();
        $('.step-area').html("<p>" + step + "</p>");
    });

$（'span.caption'）。单击（函数（）{
var step=$（'p.area-desc'）.html（）；
$（'.step area'）.html（“”+step+”
”）；
});

此时，代码所做的只是获取第一个p标记的内容并将其显示在所需的div中

我需要的是一种在每次单击时在.step区域中显示每个描述的方法。

$（'span.caption'）。单击（函数（）{
var step = $(this).closest('p.area-desc').html();

var step=$（this.parent（）.next（）.html（）；
$（'.step area'）.html（“”+step+”
”）；
});

要在页面加载时显示第一个说明：

$(document).ready(function() {
    $('.step-area').html("<p>" + $('.area-desc:first').html() + "</p>");
});

$（文档）.ready（函数（）{
$（'.step area'）.html（“”+$（'.area desc:first'）.html（）+“
”）；
});

---

更新：noscript

文档：

示例：

<noscript>
  <style>
    /* override your styles here */
  </style>
</noscript>

/*在此处覆盖您的样式*/

$（'span.caption'）。单击（函数（）{
var step=$（this.parent（）.next（）.html（）；
$（'.step area'）.html（“”+step+”
”）；
});

要在页面加载时显示第一个说明：

$(document).ready(function() {
    $('.step-area').html("<p>" + $('.area-desc:first').html() + "</p>");
});

$（文档）.ready（函数（）{
$（'.step area'）.html（“”+$（'.area desc:first'）.html（）+“
”）；
});

---

更新：noscript

文档：

示例：

<noscript>
  <style>
    /* override your styles here */
  </style>
</noscript>

/*在此处覆盖您的样式*/

ta.在页面加载时显示第一个描述的最佳方式是什么？再次干杯。我对设置要显示的描述感到有点不安：在我的样式表中没有，如果禁用js，描述将根本不会显示，你能建议一些解决方法吗？或者是另一篇文章吗？如果禁用js，上述功能将但你可以做的是有一个

部分覆盖样式并将它们设置为可见-可能有一个

！重要的
说明符。认为Modernizer是一种方法吗？所以…js.area desc:display none；如果在用户浏览器上禁用js，Modernizer将不起作用。Modernizer使用js来完成所有这些功能的详细说明ctions.ta.在页面加载时显示第一个描述的最佳方式是什么？再次干杯。我对设置要显示的描述有点不安：在我的样式表中没有，如果js被禁用，描述将根本不会显示，你能建议一些解决方法吗？或者是另一篇文章吗？如果js被禁用，上面的功能将但你可以做的是有一个
部分覆盖样式并将它们设置为可见-可能有一个
！重要的
说明符。认为Modernizer是一种方法吗？所以…js.area desc:display none；如果在用户浏览器上禁用js，Modernizer将不起作用。Modernizer使用js来完成所有这些功能的详细说明摩擦。