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

Tiago 发表于 Dev

蒂亚戈

我有以下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];

谢谢

TJ人群

如果用“每个第一类的每个第一实例.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对象使我们可以为以前见过的每个类名保留标志，因此我们在查看第一个类名时就知道了。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。