如何从 jQuery 中的同名 div 获取当前选定的 div 元素？

Question

任何人都可以帮助我使用 jQuery 从同一个 div 中定位 selected 项目吗？

这是我在 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 创建不同的卡片我希望当我点击卡片时它会显示点击卡片的内容

但我在下面试过 select 第一个元素不是其他元素

jQuery代码：

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

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

})

Answer 1

根据您的代码，html 中会有多个相同的 ID，这是一种不好的做法。

考虑如下更正您的代码：

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

如何从 jQuery 中的同名 div 获取当前选定的 div 元素？

how to get current selected div elements from same name div in jQuery?

javascript

jquery

codeigniter

codeigniter-3