javascript - 使用每个函数 JS 进行迭代

Question

我的 blade.php 中有 3 张卡片，如下所示:

   <div class="container-fluid cfluid" id="cfluid">
    <div class="row">
    <div class="col-md-1 colmd1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed    "></i>
                <span style="font-size:30px" class="roomT" 
      id="roomT">A1</span>
                <small>time here </small>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed  "></i>
                <span style="font-size:30px" class="roomT" 
                id="roomT">A2</span>
                <small>time here </small>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed    "></i>
                <span style="font-size:30px" class="roomT" 
                id="roomT">A3</span>
                <small>time here </small>
            </div>
        </div>
    </div>
  </div>
 </div>

我需要获取的是跨度内的文本。这是我的 each 函数的代码:

    $("#cfluid").each(function(){
        var title = $(".roomT").text();
        console.log(title);
    });

但是我得到这个结果，我知道这是错误的:

A1A2A3

其中应该是这样的:

A1

A2

A3

Answer 1

您可以使用类(card-body 和 roomT)作为选择器的一部分。然后只需使用 this对象引用当前元素以获取文本:

$("#cfluid .card-body .roomT").each(function(){
  var title = $(this).text();
  console.log(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
    <div class="row">
    <div class="col-md-1 colmd1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed    "></i>
                <span style="font-size:30px" class="roomT" 
      id="roomT">A1</span>
                <small>time here </small>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed  "></i>
                <span style="font-size:30px" class="roomT" 
                id="roomT">A2</span>
                <small>time here </small>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="card bg-success text-white">
            <div class="card-body">
                <i class="fa-2x fas fa-door-closed    "></i>
                <span style="font-size:30px" class="roomT" 
                id="roomT">A3</span>
                <small>time here </small>
            </div>
        </div>
    </div>
  </div>
 </div>