CODEWITHSUNDEEP
jqueryeach
Keith Savoie
Keith Savoie

Reputation: 3

jquery using .each with multiple selectors and knowing which one it is currenlty on

Sorry, this is poorly worded.

I have a .each with multiple selectors $('.class1, .class2').each(fun.... In this example is there a way to know which class it is currently iterating over within the .each.

e.g.-ILLUSTRATIVE code

   $('.class1, .class2').each(function () {
        var thisClass = ?$(this).iteratedClassName?;
        if ($(thisClass).prop('checked')) {
            // do something with items with thisClass assigned 
        }
    });

The behavior I am trying to achieve with above example is the different class names group the behavior between each class's group of elements independently of one another.

I could run the .each twice but that is not very flexible or elegant.

Upvotes: 0

Views: 2563

Answers (2)

zer00ne
zer00ne

Reputation: 44086

Get individual className(s) from a target of many

Snippet 1

  • Use a selector that has specificity and range ('[class^="klass"]') (Any element with a class that starts (^) with klass)
  • Reference the jQuery object this as self
  • Reference self's classes (classList) [self is a jQuery object, so if you use a plain JavaScript method on it, we must dereference (self[0]).
  • Display the classes.

Snippet 2

  • Uses the each() method and references each element by this.
  • The class is extracted as it is in Snippet 1.
  • Upon the each iteration, each className is appended to #out1.

SNIPPET 1

$('[class^="klass"]').on('click', function() {
  var self = $(this);
  var cls = self[0].classList;
  $('#out1').html("Selected ClassName(s): ." + cls);
});
div {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id='kase1'>
  <div class='klass1'>KLASS1</div>
  <div class='klass2'>KLASS2</div>
  <div class='klass3'>KLASS3</div>
  <div class='klass4'>KLASS4</div>
  <div class='klass5'>KLASS5</div>
  <div class='klass6'>KLASS6</div>
  <div class='klass7'>KLASS7</div>
  <div class='klass8'>KLASS8</div>
  <div class='klass9'>KLASS9</div>
  <div class='klassA'>KLASSA</div>
  <div class='klassB'>KLASSB</div>
  <div class='klassC'>KLASSC</div>
</section>

<label for='out1'>Referencing with "this"
  <output id='out1'></output>
</label>
<br/>
<br/>

SNIPPET 2

$('[class^="klass"]').each(function(obj, idx) {
  var cls = $(this)[0].classList;
  $('#out1').append("<div>ClassName: ." + cls + "</div>");
});
div {
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id='kase1'>
  <div class='klass1'>KLASS1</div>
  <div class='klass2'>KLASS2</div>
  <div class='klass3'>KLASS3</div>
  <div class='klass4'>KLASS4</div>
  <div class='klass5'>KLASS5</div>
  <div class='klass6'>KLASS6</div>
  <div class='klass7'>KLASS7</div>
  <div class='klass8'>KLASS8</div>
  <div class='klass9'>KLASS9</div>
  <div class='klassA'>KLASSA</div>
  <div class='klassB'>KLASSB</div>
  <div class='klassC'>KLASSC</div>
</section>

<label for='out1'>Referencing with "this"
  <output id='out1'></output>
</label>
<br/>
<br/>

Upvotes: 0

alex shev
alex shev

Reputation: 47

pass index and value as arguments of the anonymous function

$('.class1, .class2').each(function (index, value) {
    console.log(index); //which one in order you're at
    console.log(value); //value you're at
}

Upvotes: 1

Related Questions