使用 jquery 查找第一个动态元素类的每个第一个实例

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”开头的类是动态类，我事先不知道全名，虽然这个第一位总是一样的。此类在循环中可能会出现多次，也可能不会出现。

问题：使用 JQuery，我如何定位每个 .wrap > div 的第一个类的每个第一个实例？

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

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

谢谢

Answer 1

如果 “每个.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 对象让我们可以为之前看到的每个类名保留标志，这样我们就知道何时查看第一个。

正则表达式/\b2016\d+\b/ 将匹配任何以2016 开头并且后面只有数字的类名（\b 是“单词边界”断言）。这将与您所拥有的相匹配，但也与其他长度相匹配，例如 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>