使用 jQuery 按属性值长度选择元素

Question

在 jQuery 中，是否有一个选择器语句可以直接获取具有特定字符串长度属性的所有 DOM 对象？

例如，在下面的 HTML 中，我只想检索类值长度为 3 个字符的节点。结果应该是类

.one

和

.two

。我怎样才能做到这一点？

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Answer 1

这是一个有点奇怪的要求，但你可以使用

filter()

来实现它。

var $divs = $('div').filter(function() {
    return this.className.length === 3;
});

-- 2021 年 4 月更新 --

使用 ES6 这段代码可以变得更短：

let $divs = $('div').filter((i, el) => el.className.length === 3);

Answer 2

James Padolsey 有一个很酷的函数，可以使用正则表达式来选择元素。

示例：

// Select all DIVs with classes that are three characters long:
$('div:regex(class,^[a-zA-Z]{3}$)').css("background-color","black");

查看完整解决方案：

https://jsfiddle.net/xtoakxev/

Answer 3

Rory 当然有一个更优雅的解决方案，但这是我在有类似要求时所做的事情。

$(function () {
      var a = [];
      $div = $('div').each( function(i , el){
          return ($(this)[0].className.length === 3) ? a.push($(this)) : null;
      });
});

Answer 4

这个方案更利于代码复用：

包含 jQuery

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>

创建自定义选择器

:attrlength(attr,length)

$.extend(jQuery.expr[':'], {  
  attrlength: function (el, index, selector) {
    var splitted = selector[3].split(',');
    var attrName = splitted[0].trim();
    var attrLength = parseInt(splitted[1].trim());
    var attr = jQuery(el).attr(attrName);
    if(attr) return attr.length == attrLength;
    return false;
  }
});

测试一下

JS

$(document).ready(function(){
    const elements = $(":attrlength(class,4)");
    console.log(elements[0]);
});

HTML

<span class="four">Text</span>
<span class="two">Text123</span>
<span class="one">Text123</span>

输出

<span class="four">Text</span>