jquery - 使用 jQuery 将点击的 li html 复制到另一个标签中

Question

我有以下 HTML

<div class="btn-group">
  <button class="btn dropdown-toggle action" data-toggle="dropdown">Nav name <span class="caret"></span></button>
  <ul id="nav" class="dropdown-menu test">
    <li><a href="#" id="action-1">one</a></li>
    <li><a href="#" id="action-2">two</a></li>
    <li><a href="#" id="action-3">three</a></li>
  </ul>
</div>

单击a 时<li>，我需要列表标签的 HTML 来替换“导航名称”

这是我正在使用的 jQuery 和这里的 jsfiddle

jQuery("#action-1").click(function(e){
 jQuery('.action').html('one <span class="caret"></span>');
e.preventDefault();
});
jQuery("#action-2").click(function(e){
 jQuery('.action').html('two <span class="caret"></span>');
e.preventDefault();
});
jQuery("#action-3").click(function(e){
 jQuery('.action').html('three <span class="caret"></span>');
e.preventDefault();
});

我知道这不是干净的代码，它可以写得更好。如何将 $this 与 jQuery 一起使用来获取 li 标签的 HTML 并替换 .action 类 html，即“导航名称”？由于下拉列表将动态生成，我需要使用一种方法来获取单击的 li 的 HTML，但不知道如何编写它。

谢谢

Answer 1

$("#nav > li > a").click(function(e) {
    e.preventDefault();
    $(".action").html($(this).text() + '<span class="caret"></span>');
});

Answer 2

$('#nav li').on('click', function (e) {
    e.preventDefault();
    $('.action').html($(this).text() + '<span class="caret"></span>');
});

JSF 中。