Bootstrap Dropdown - показать выбранный элемент ближайший элемент не работает

Question

Я использую Bootstrap выпадающее меню и показывать выбранный элемент ...

Это работает прекрасно, как и ожидалось. Но я попадаю в проблему, если у меня есть несколько выпадающих списков. Если я изменяю один элемент, все выпадающие меняются ... хотя я использую closest элемент из JQuery ...

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); 
}); 

Answer 2

Вы ориентируетесь .dropdown_title элемент в целом, а не в конкретной. Ниже изменения должны сделать трюк ..

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

Вот working fiddle

Answer 3

В Вашей первой линии, this уже якорь тег, так Theres нет необходимости идти к родительскому Ли, чтобы затем получить Якорная бирка снова. так что вы можете просто сделать jQuery(this).html();

Тогда вы можете посмотреть на ближайший родитель, который также имеет .dropdown_title как ребенок, и искать его, как этот jQuery(this).parents('.dropdown').find('.dropdown_title')

---

Revissed JQuery ниже: JSFIDDLE

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