Javascript - 类第一次出现，多次

Question

我正在尝试检索给定类在另一个类中第一次出现的情况，该类在页面内重复了几次。让我们用一个例子来使它更容易:

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

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

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

其结果应该是一个数组:

bbbb

ffff

jjjj

知道如何在没有“each”的情况下做到这一点吗？

谢谢!

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