Jquery过滤掉每个函数的双重类名

Question

这是示例代码

html

<div class="class-name-1"></div>
<div class="class-name-1"></div>

<div class="class-name-2"></div>
<div class="class-name-2"></div>

...

<div class="class-name-30"></div>
<div class="class-name-30"></div>

Jquery

$('class^=class-name-').each(function() {
  console.log($(this));

  fn_myFunction();
});

这个脚本将运行六十次fn_myFunction()，我想为每个class^=class-name-<运行fn_myFunction()一次，这意味着使上面的脚本运行 fn_myFunction() 总共三十次。

返回第一个或最后一个元素也可以。

如果可能的话，我希望将 jquery 选择器保留为 $('class^=class-name-')。

如何使用 jquery 做到这一点？

谢谢。

Answer 1

您可以构建一个唯一类的数组，然后使用 .filter() method 相应地过滤元素。 .

在下面的示例中，$uniqueElements 是表示过滤元素的 jQuery 对象。

var uniqueClasses = [];
var $uniqueElements = $('[class*=class-name-]').filter(function () {
  var classes = $(this).attr('class').match(/class-name-\d+/)[0];
  return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0;
});

$uniqueElements.css('background-color', '#f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-class class-name-1 other-class">class-name-1</div>
<div class="first-class class-name-1 other-class">class-name-1</div>

<div class="class-name-2">class-name-2</div>
<div class="class-name-2">class-name-2</div>

然后您可以迭代 $uniqueElements 中的每个元素并调用您的函数:

var uniqueClasses = [];
var $uniqueElements = $('[class*=class-name-]').filter(function () {
  var classes = $(this).attr('class').match(/class-name-\d+/)[0];
  return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0;
});

$uniqueElements.each(fn_myFunction);

function fn_myFunction () {
  $(this).css('background-color', '#f00');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-class class-name-1 other-class">class-name-1</div>
<div class="first-class class-name-1 other-class">class-name-1</div>

<div class="class-name-2">class-name-2</div>
<div class="class-name-2">class-name-2</div>