Jquery filter out the double class name with each function

debugcn Published at Dev

aboutjquery

Here is the example code

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();
});

This script will run sixty times fn_myFunction(), i would like to run fn_myFunction() only once for each class^=class-name-, that mean make above script run fn_myFunction() total thirty times.

Return first or last element is also ok.

And i would like to keep the jquery selector as $('class^=class-name-') if possible.

How can i do this with jquery?

Thanks.

Josh Crozier

You could build an array of unique classes and then filter the elements accordingly using the .filter() method.

In the example below, $uniqueElements is a jQuery object representing the filtered elements.

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>

Then you can iterate over each element in $uniqueElements and invoke your function:

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.