Javascript 使用每个函数进行迭代

我的

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>

然而，我知道这是错误的结果：

A1A2A3

其中应该是这样的：

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

A1

A2

A3
如果您使用
\cfuild
作为父级。您应该循环
.roomT
。如果您需要数组结果，最好使用
而不是
每个

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

console.log(res)


var res=$（“#cfluid”）.find（'.roomT'）.map（函数（）{
返回$（this.text（）；
}).get（）；
console.log（res）

A1
时间到了
A2
时间到了
A3
时间到了
如果您使用
#cfuild
作为父级。您应该循环
.roomT
。如果您需要数组结果，最好使用而不是
每个

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

console.log(res)


var res=$（“#cfluid”）.find（'.roomT'）.map（函数（）{
返回$（this.text（）；
}).get（）；
console.log（res）

A1
时间到了
A2
时间到了
A3
时间到了
您可以使用类（卡体和roomT）作为选择器的一部分。然后只需使用object引用当前元素即可获得文本：


$（“#cfluid.card body.roomT”）。每个（函数（）{
var title=$（this.text（）；
控制台日志（标题）；
});

A1
时间到了
A2
时间到了
A3
时间到了
您可以使用类（卡体和roomT）作为选择器的一部分。然后只需使用object引用当前元素即可获得文本：


$（“#cfluid.card body.roomT”）。每个（函数（）{
var title=$（this.text（）；
控制台日志（标题）；
});

A1
时间到了
A2
时间到了
A3
时间到了
您可以直接找到
.roomT
元素和循环，如下所示


$（'#cfluid.roomT'）。每个（（索引，元素）=>{
console.log（$（元素）.text（））
})

A1
时间到了
A2
时间到了
您可以直接找到
.roomT
元素和循环，如下所示


$（'#cfluid.roomT'）。每个（（索引，元素）=>{
console.log（$（元素）.text（））
})

A1
时间到了
A2
时间到了
id应该是唯一的。您不应该迭代多个匹配
#cfluid
的元素容器流体
#cfluid
只使用一次。我使用了，但仍然得到相同的结果。如前所述，它是独一无二的。它放在最上面。ID应该是唯一的。您不应该迭代多个匹配
#cfluid
的元素容器流体
#cfluid
只使用一次。我使用了，但仍然得到相同的结果。如前所述，它是独一无二的。它被放在最上面。