查找具有 jquery 的元素的第一个动态 class 的每个第一个实例

Question

我有以下 html 结构：

<div class="wrap">
  <div class="201610 generic-class"></div>
  <div class="201612 generic-class"></div>
  <div class="201612 generic-class"></div>
  <div class="201613 generic-class"></div>
  <div class="201613 generic-class"></div>
</div>

以“2016”开头的class是一个动态的class，我事先不知道全名，虽然这第一位总是一样的。此 class 可能会或可能不会在循环中出现多次。

问题：对于 JQuery，我如何定位每个 .wrap > div 的第一个 class 的每个第一个实例？

不确定这是否有帮助，但我尝试了以下内容，但从未得到超过动态 class 的单个第一个实例：

var theClass= $j('.wrap > div').attr('class');
var split = theClass.split(' ');
var firstClass = split[0];

谢谢

Answer 1

如果"every first instance of the first class of every .wrap > div"是指这些：

<div class="wrap">
  <div class="201610 generic-class"></div><!-- This one -->
  <div class="201612 generic-class"></div><!-- This one -->
  <div class="201612 generic-class"></div>
  <div class="201613 generic-class"></div><!-- This one -->
  <div class="201613 generic-class"></div>
</div>

最简单的方法就是循环。如果只有一个 .wrap，一个循环就足够了：

var seen = Object.create(null);
$(".wrap > div").each(function() {
    var theClass = this.className.match(/\b2016\d+\b/)[0];
    if (theClass && !seen[theClass]) {
        seen[theClass] = true;
        // ...do something with it here
    }
});

seen 对象让我们可以为我们之前看到的每个 class 名称保留标志，这样我们就知道何时看到第一个。

正则表达式 /\b2016\d+\b/ 将匹配任何以 2016 开头且后面只有数字的 class 名称（\b 是 "word boundary" 断言）。这将与您所拥有的相匹配，但也与其他长度的长度相匹配，例如 20161 或 201612。如果您想完全匹配六位数字（根据您的示例），请改用 /\b2016\d{2}\b/。

实例：

var seen = Object.create(null);
$(".wrap > div").each(function() {
  var theClass = this.className.match(/\b2016\d+\b/)[0];
  if (theClass && !seen[theClass]) {
    seen[theClass] = true;
    // ...do something with it here, I'll turn its text green
    $(this).css("color", "green");
  }
});

<div class="wrap">
  <div class="201610 generic-class">201610</div>
  <div class="201612 generic-class">201612</div>
  <div class="201612 generic-class">201612</div>
  <div class="201613 generic-class">201613</div>
  <div class="201613 generic-class">201613</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果有多个 .wrap个元素，那么你需要一个外循环：

$(".wrap").each(function() {
    var seen = Object.create(null);
    $(this).children("div").each(function() {
        var theClass = this.className.match(/\b2016\d+\b/)[0];
        if (theClass && !seen[theClass]) {
            seen[theClass] = true;
            // ...do something with it here
        }
    });
});

实例：

$(".wrap").each(function() {
  var seen = Object.create(null);
  $(this).children("div").each(function() {
    var theClass = this.className.match(/\b2016\d+\b/)[0];
    if (theClass && !seen[theClass]) {
      seen[theClass] = true;
      // ...do something with it here; I'll turn its text green:
      $(this).css("color", "green");
    }
  });
});

<div>First wrap:</div>
<div class="wrap">
  <div class="201610 generic-class">201610</div>
  <div class="201612 generic-class">201612</div>
  <div class="201612 generic-class">201612</div>
  <div class="201613 generic-class">201613</div>
  <div class="201613 generic-class">201613</div>
</div>
<div>Second wrap:</div>
<div class="wrap">
  <div class="201610 generic-class">201610</div>
  <div class="201612 generic-class">201612</div>
  <div class="201612 generic-class">201612</div>
  <div class="201613 generic-class">201613</div>
  <div class="201613 generic-class">201613</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

查找具有 jquery 的元素的第一个动态 class 的每个第一个实例

Find every first instance of the first dynamic class of element with jquery

jquery

class

dynamic

instance

target