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.

回答1:

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
}

回答2:

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/>

来源：https://stackoverflow.com/questions/40619064/jquery-using-each-with-multiple-selectors-and-knowing-which-one-it-is-currenlty

标签

jquery

each