Question

在每个函数中，我在DOM中搜索具有特定 className 的许多元素。此ClassName根据其长度将创建一个长2或4的数组我需要分别选择这两种元素，以便采取不同的行动我怎么能这样做？

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

控制台将返回 3个元素，其中两个长度 2 ，一个 4 。
我需要将这两个结果分开，以便采取不同的行动，因为它们是变量我需要类似的东西：

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

Answer 1

一种可能的方法是使用.filter方法将函数作为参数：

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

我猜你想要这些作为jQuery集而不是数组，这样你就可以轻松地使用jQuery来操作它们。所以这样做：

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

如果你有大量的元素并且证明它很慢，你可以通过使它更复杂并使用一个each而不是过滤器来稍微优化它。但在我证明有必要之前，我不会感到烦恼。

Answer 3

另一种可能的方法是使用条件语句 -

$('[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

我在这篇文章的评论中混合了两个解决方案：

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

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

4 个答案: