使用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对象让我们为之前看过的每个类名保留标记，因此我们知道何时查看第一个类名。

Te regex /\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>