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>

我想检索第一次出现的值＃34; test＆＃34;在每个＆＃34;行＆＃34;。我可以使用＆＃34;每个＆＃34;通过＆＃34; row＆＃34;来浏览每个div但是我想避免这种情况，因为我需要将相同的代码应用于那些不需要＆＃34;每个＆＃34;。

的网页。

我已经尝试过了：第一个或者：第一个孩子，但问题是测试并不总是在同一个位置。

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

BBBB

FFFF

JJJJ

任何想法如何在没有＆＃34;每个＆＃34; ？

谢谢！

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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Javascript - 第一次出现的课程，多次

3 个答案: