Wählen Nichte und ändern Geschwister

Question

Ich habe diesen Bootstrap (minimiert) -Code.

<div id='DD_type' class="dropdown"> 
    <button class="btn" ></button> 
    <span id='af'>Type</span> 
    <ul class="dropdown-menu"> 
     <li> 
     I want this HTML(its more than text) in my button 
     </li> 
    </ul> 
</div> 

<div id='Another Dropdown' class="dropdown"> 
    <button class="btn" ></button> 
    <span id='af'>Type</span> 
    <ul class="dropdown-menu"> 
     <li> 
     I want this HTML(its more than text) in my button 
     </li> 
    </ul> 
</div> 

Ich möchte die Schaltfläche mit dem ersten Element in der li füllen. Was ich jetzt habe, ist eine statische Lösung.

$(function() { 
    $('#DD_LayOut>button').html($('#DD_LayOut>ul>li').html()) 
} 

Allerdings hätte ich gerne eine generische Lösung. (Ja, ich habe etwas gesucht).

Mine funktioniert überhaupt nicht.

$('.dropdown > button').html($(This).siblings('ul>li:first').html()) 

Könnte jemand mir bei diesem Problem helfen.

Vielen Dank im Voraus!

Answer 1

Um dies zu erreichen Sie die html() Methode mit einer Funktion als der Anwendungsbereich dieser Funktion das button Element zur Verfügung stellen können, die Sie auf das DOM zu durchqueren können wird die erforderlichen li, so etwas zu finden:

$('.dropdown > button').html(function(i, h) { 
    return $(this).siblings('.dropdown-menu').find('li:first').html(); 
}); 

Working example