Найдите элемент в div, который не является дочерним

Question

Попытка создать скрипт, который делает css для родителя этого элемента, но сначала мне нужно отфильтровать / проверить заголовок элемента кнопки. Bootstrap меняет заголовок элемента кнопки в зависимости от выбранной опции выбора элемента. Я не думаю, что могу выбрать .parent () или .children (), потому что они не родители или дети друг друга. Пробовал .closest (), но не игра в кости, как я настроил.

Когда я консоль журнала businessCheck, он возвращает неопределенное.

 var businessCheck = $('#businessMarkets').closest("button").prop("title");
 console.log(businessCheck)

<div class="btn-group bootstrap-select form-control">
   <button type="button" data-toggle="dropdown" data-id="businessMarkets" title="Business 
   Markets Served*">
   </button>

   <div class="dropdown-menu open" role="combobox">
   </div>

   <select id="businessMarkets">
     <option value="">Title</option>
     <option value="" disabled="" selected="false" style="display: none;" id="businessMarkets- 
     Placeholder">Business Markets Served*</option>
   </select>
</div>

<button id="toSlide-3"></button>


<script>
function check_BusinessMarket() {
 var businessCheck = 
 $('#businessMarkets').closest("button").prop("title");
 console.log(businessCheck)

$('#toSlide-3').on('click', function (event) {
  check_BusinessMarket()
})

</script>

Answer 1

Кнопка является родственным элементом меню выбора, поэтому вы можете перейти к нему, используя метод siblings .

var title = $('#businessMarkets').siblings("button").prop("title");

console.log(title);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group bootstrap-select form-control">
   <button type="button" data-toggle="dropdown" data-id="businessMarkets" title="Business Markets Served*">
   </button>

   <div class="dropdown-menu open" role="combobox">
   </div>

   <select id="businessMarkets">
     <option value="">Title</option>
     <option value="" disabled="" selected="false" style="display: none;" id="businessMarkets- 
     Placeholder">Business Markets Served*</option>
   </select>
</div>