Javascript - 类的第一次出现，多次答案

【问题标题】：Javascript - first occurence of class, multiple timesJavascript - 类的第一次出现，多次
【发布时间】：2018-03-16 10:56:06
【问题描述】：

我试图在页面内重复几次的另一个类中检索给定类的第一次出现。让我们用一个例子来简化一下：

<div class="row">
    <div class="otherclass">
    aaaa
    </div>
    <div class="test">
    bbbb
    </div>
    <div class="test">
    cccc
    </div>
</div>

<div class="row">
    <div class="otherclass">
    dddd
    </div>
    <div class="otherclass">
    eeee
    </div>
    <div class="test">
    ffff
    </div>
    <div class="test">
    gggg
    </div>
</div>

<div class="row">
    <div class="otherclass">
    hhhh
    </div>
    <div class="otherclass">
    iiii
    </div>
    <div class="test">
    jjjj
    </div>
    <div class="test">
    kkkk
    </div>
</div>

我想检索每个“行”内第一次出现“测试”的值。我可以使用“each”通过“row”遍历每个 div，但我想避免这种情况，因为我需要将相同的代码应用于不需要“each”的页面。

我试过 :first 或 :first-child 但问题是 test 并不总是在同一个位置。

这个结果应该是一个数组：

bbbb

ffff

jjjj

知道没有“每个”我怎么能做到这一点吗？

谢谢！

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

如果您特别不想使用each()，您可以使用map()，尽管循环逻辑几乎相同。只是map()在创建数组的时候更加简洁。

var foo = $('.row').find('.test:first').map(function() {
  return $(this).text();
}).get();

console.log(foo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="otherclass">aaaa</div>
  <div class="test">bbbb</div>
  <div class="test">cccc</div>
</div>

<div class="row">
  <div class="otherclass">dddd</div>
  <div class="otherclass">eeee</div>
  <div class="test">ffff</div>
  <div class="test">gggg</div>
</div>

<div class="row">
  <div class="otherclass">hhhh</div>
  <div class="otherclass">iiii</div>
  <div class="test">jjjj</div>
  <div class="test">kkkk</div>
</div>

【讨论】：

【解决方案2】：

find(".test:first") 应该这样做。我提供的解决方案使用 each 循环，但我认为使用一个循环没有问题。

$.each($(".row"), (i, obj)=>{
  console.log($(obj).find(".test:first").html())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="otherclass">
    aaaa
    </div>
    <div class="test">
    bbbb
    </div>
    <div class="test">
    cccc
    </div>
</div>

<div class="row">
    <div class="otherclass">
    dddd
    </div>
    <div class="otherclass">
    eeee
    </div>
    <div class="test">
    ffff
    </div>
    <div class="test">
    gggg
    </div>
</div>

<div class="row">
    <div class="otherclass">
    hhhh
    </div>
    <div class="otherclass">
    iiii
    </div>
    <div class="test">
    jjjj
    </div>
    <div class="test">
    kkkk
    </div>
</div>

【讨论】：

【解决方案3】：

您可以使用 jQuery 的 each() 和 :first 选择器执行以下操作：

var res = [];
$('.row').each(function(){
  var text = $(this).find('.test:first').text().trim();
  res.push(text);
});
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="otherclass">
    aaaa
    </div>
    <div class="test">
    bbbb
    </div>
    <div class="test">
    cccc
    </div>
</div>

<div class="row">
    <div class="otherclass">
    dddd
    </div>
    <div class="otherclass">
    eeee
    </div>
    <div class="test">
    ffff
    </div>
    <div class="test">
    gggg
    </div>
</div>

<div class="row">
    <div class="otherclass">
    hhhh
    </div>
    <div class="otherclass">
    iiii
    </div>
    <div class="test">
    jjjj
    </div>
    <div class="test">
    kkkk
    </div>
</div>

【讨论】：