如何选择具有特定数组长度的元素

Question

In an each function , I search through the DOM for many elements with a specific className . This ClassName, according to its length, will create an array that is long 2 or 4.
I need to select these two type of element separately in order to act differently.
How can I do that?

<div class="foo-1"></div>
<div class="foo-1"></div>
<div class="foo-1-boo-2"></div>

jQuery

$( '[class*=foo-]' ).each(function() {
  var foo = $( this );
  var fooArray = foo.attr( 'class' ).split( '-' );
  var arrayLength = fooArray.length;
});

the console will return that there are 3 elements , two of them have length 2 and one 4 .
I need to separate these two results in order to act differently as they were variables.
I need something like:

var caseA = (foo with an arrayLength === 2);
var caseB = (foo with an awwayLength === 4);

Answer 1

One possible way is to use .filter method with a function as an argument:

var elements = $('[class*=foo-]'),
    caseA = elements.filter(function() {
        return this.className.split('-').length === 2;
    }),
    caseB = elements.filter(function() {
        return this.className.split('-').length === 4;
    });

console.log(caseA.length, caseB.length);

Answer 2

I'm guessing you want these as jQuery sets instead of arrays so you can easily manipulate them en masse with jQuery. So this will do it:

var caseA = $('[class*=foo-]').filter(function() {
   return $(this).attr("class").split("-").length === 2;
});

var caseB = $('[class*=foo-]').filter(function() {
   return $(this).attr("class").split("-").length === 4;
});

If you have tons of elements and it proves to be slow you can optimize this slightly by making it more complex and using one each instead of filter. But I wouldn't bother until it proves to be necessary.

Answer 3

Another possible way is to just use a conditional statement -

$('[class*=foo-]').each(function () {
    var foo = $(this);
    var fooArray = foo.attr('class').split('-');
    var arrayLength = fooArray.length;
    (2 == arrayLength ? console.log('to do something') : '');
    (4 == arrayLength ? console.log('do something for') : '');
});

Answer 4

I mixed two solutions in the comment of this post:

var caseA = col.filter(function() {
  return this.className.split( '-' ).length === 2;
});
var caseB = col.filter(function() {
  return this.className.split( '-' ).length === 4;
});