[英]How to select elements with a specific array length
在每个函数中 ,我在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);
一种可能的方法是将.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);
我猜想您希望将它们作为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
元素而不是过滤器来对其进行稍微优化。 但是,除非证明有必要,否则我不会打扰。
另一种可能的方法是只使用条件语句-
$('[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') : '');
});
我在这篇文章的评论中混合了两种解决方案:
var caseA = col.filter(function() {
return this.className.split( '-' ).length === 2;
});
var caseB = col.filter(function() {
return this.className.split( '-' ).length === 4;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.