迭代使用每个函数 JS

Question

我的 blade.php 中有 3 个 cards，看起来像这样：

   <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

如果您使用 #cfuild 作为父项。您应该循环 .roomT。如果您需要数组结果，最好使用 Jquery.map 而不是 each

 var res = $("#cfluid").find('.roomT').map(function(){
         return $(this).text();
    }).get();

console.log(res)

var res = $("#cfluid").find('.roomT').map(function() {
  return $(this).text();
}).get();

console.log(res)

<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>

Answer 2

您可以使用类（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>

Answer 3

可以直接定位.roomT元素，循环如下

$('#cfluid .roomT').each((index, element) => {
console.log($(element).text())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" 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="container-fluid" 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">A2</span>
                <small>time here </small>
            </div>
        </div>
    </div>
    </div>

迭代使用每个函数 JS

Iterate using each function JS

javascript

each