使用每个函数 JS 进行迭代答案

【问题标题】：Iterate using each function JS使用每个函数 JS 进行迭代
【发布时间】：2020-03-27 22:42:26
【问题描述】：

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

里面应该是这样的：

【问题讨论】：

ID 应该是唯一的。您不应该遍历多个匹配 #cfluid 的元素
容器流体#cfluid 只使用一次。
我做到了，但我仍然得到相同的结果。如前所述，它是独一无二的。它位于最顶部。

标签： javascript each

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：