как получить текущие выбранные элементы div с тем же именем div в jQuery?

Question

Может ли кто-нибудь помочь мне нацелиться на выбранный предмет из того же элемента, используя jQuery?

Вот мой взгляд на codeigniter:

<?php 

 foreach($operator as $Operator) {
 ?>
 <div id="default">
                <div class="col-xl-12 col-md-12 mb-4">
                  <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" id="countryName"><?=@$Operator->country?></div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname"><?=@$Operator->longName?></div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://imagerepo.ding.com/logo/<?=strtoupper(substr(@$Operator->providerCode,0,2))?>.png"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden" name="countryIso" value="<?=$Operator->countryIso?>">
</div>
    <?php }?>

Выше div создайте разные карты. Я хочу, чтобы при нажатии на карту отображалось содержимое карты, на которую вы нажали

Но Я попробовал ниже выбрать первый элемент, а не другие

jQuery код:

$("#default").click(function(event){

    alert($(this,"#operatorname").text())

})

Answer 1

Согласно вашему коду, в html будет несколько одинаковых идентификаторов, и это плохая практика.

Попробуйте исправить код следующим образом:

 <?php  foreach($operator as $index => $Operator):?>
 <div id="default<?= '_' . $index ?>" class="operator-card">
                <div class="col-xl-12 col-md-12 mb-4">
                  <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName"><?=@$Operator->country?></div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" class="operatorname"><?=@$Operator->longName?></div>
                        </div>
                        <div class="col-auto" class="operatorImage">
                            <img src="https://imagerepo.ding.com/logo/<?=strtoupper(substr(@$Operator->providerCode,0,2))?>.png"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden" name="countryIso" value="<?=$Operator->countryIso?>">
</div>
    <?php endforeach; ?>

Тогда в javascript:

$(document).ready(function() {
    $(".operator-card").on('click', function() {
        alert($(this).find('.operatorname').text());
    })
})