Jquery select 按属性长度

Question

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

例如，在下面的 html 中，仅检索字符串长度为 3 的 class 的节点 => 结果是 class 是一和二的 div ?

<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

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

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

Answer 3

有一个很酷的 function from 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 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>