Выбор бутстрапа с помощью jquery не работает

Question

У меня есть twitter-bootstrap select, что я пытаюсь выполнить итерацию с помощью jquery для создания списка маркеров google-maps (широта/долгота/идентификатор здания хранится со списком). на документ, готовый я хочу просматривать список и извлекать широту/долготу от каждого элемента Li и создать маркер с этого места:

 <select id="buildings" class="selectpicker" data-width="100%" data-live-search="true"><!-- style="border-radius:0px;" --> 
      {% for category in buildings %} 
       <optgroup label="{{ category.category.asBuildingCategory }}"> 
        {% for building in category.buildings %} 
         <option data-content="<span data-latitude='{{building.fLatitude}}' data-longitude='{{building.fLongitude}}' data-build-id='{{building.ixBuilding}}'>{{building.asBuildingName}}</span>"></option> 
        {% endfor %} 
       </optgroup> 
      {% endfor %} 
     </select> 

Это то, что сгенерированный код выглядит в браузере:

Я могу успешно прикрепить onclick для каждого пункта меню, но я не могу переименовать список select через jquery.

До сих пор я попытался это:

$(document).ready(function() { 
    $(".dropdown-menu.inner.selectpicker li").each(function() { 
     alert($(this)); 
    }); 
}); 

но это, кажется, не что-нибудь ударить. Однако этот код работает для добавления щелчка слушателя:

$(document.body).on('click', '.dropdown-menu.inner.selectpicker li', function() { 
    debugger; 
    var latitude = $(this).find("span").data('latitude'); 
    var longitude = $(this).find("span").data('longitude'); 
    var buildingID = $(this).find("span").data('build-id'); 
}); 

EDIT Это то, что мой JQuery находит, используя этот код:

var test = $(".dropdown-menu.inner.selectpicker li"); 

Он просто получает весь документ вместо списка элементы

Answer 1

Ваша разметка не складывается. Похоже, что-то мутирует разметку в браузере для вашего выбора, чтобы иметь классы .dropdown-menu.inner.selectpicker так разметки, прежде чем он попадет в браузер только показывает класс selectpicker:

<select id="buildings" class="selectpicker" ...> 

Используйте ID вместо этого, если у вас есть несколько selectpicker классов:

$(document).ready(function() { 
    $("#buildings li").each(function() { 
     alert($(this)); 
    }); 
});