jquery - Bootstrap Dropdown - 显示所选项目最接近的元素不起作用

Question

我正在使用 Bootstrap 下拉菜单并显示所选项目...

正如预期的那样，它工作得很好。但如果我有多个下拉菜单，我就会遇到问题。如果我更改一项，所有下拉菜单都会更改...尽管我使用的是 jQuery 中的 closest 元素...

Online Demo

jQuery

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery('.dropdown_title').html(newIcon);
});

HTML

<h4>Select 1</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

<h4>Select 2</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

Answer 1

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery(this).parents('.dropdown').find('.dropdown_title').html(newIcon);
});