Question

我正在尝试通过它使用该值找到一个类名称name，我正在根据名称的长度寻找不同的长度。

我的结果错了。任何人都帮我找到正确的方法。这是我的作品：

html：

    <div id="first">
        <span class="textHighLight userNote2">CO</span>
        <span class="textHighLight userNote2">N</span>
        <span class="textHighLight userNote2">STR</span>
        <span class="textHighLight userNote2">U</span>
        <span><span class="textHighLight userNote2">CTION</span>,</span>
    </div>

    <div id="second">
        <span class="textHighLight userNote2 userNote3">CO</span>
        <span class="textHighLight userNote2 userNote3">N</span>
        <span class="textHighLight userNote2 userNote3">STR</span>
        <span class="textHighLight userNote2 userNote3">U</span>
        <span><span class="textHighLight userNote2 userNote3">CTION</span>,</span>
    </div>

var getLength = function (element) {
    var classLength = element.find('.textHighLight').filter(function(index){
        return this.className.split(' ').reduce(function(cNum, cName){
            return cName.substring(0, 8) === 'userNote' ? cNum + 1 : cNum;
        }, 0);
    }).length;

    return classLength;
}

var first = getLength($('#first'));
console.log(first) //returns 5 this is correct.

var second = getLength($('#second'));
console.log(second ) //returns 5 instead 10 (i am looking for 10!)

据我所知，我没有按照应有的方式正确过滤。有人帮我吗？

Here is the Live

Answer 1

这个答案使用jQuery.map将元素数组转换为一个数字数组，表示每个元素上有多少个类以userNote开头。然后使用Array.reduce简单地将这些数字相加。

var getLength = function (element) {
    var classLength = element.find('.textHighLight').map(function(i,e){
        return this.className.split(' ').reduce(function(cNum, cName){
            return cName.substring(0, 8) === 'userNote' ? cNum + 1 : cNum;
        }, 0);
    }).get().reduce(function(p,c){
       return p+c;  
    });

    return classLength;
}
              
console.log(getLength($('#first')))
console.log(getLength($('#second')))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
        <span class="textHighLight userNote2">CO</span>
        <span class="textHighLight userNote2">N</span>
        <span class="textHighLight userNote2">STR</span>
        <span class="textHighLight userNote2">U</span>
        <span><span class="textHighLight userNote2">CTION</span>,</span>
    </div>

    <div id="second">
        <span class="textHighLight userNote2 userNote3">CO</span>
        <span class="textHighLight userNote2 userNote3">N</span>
        <span class="textHighLight userNote2 userNote3">STR</span>
        <span class="textHighLight userNote2 userNote3">U</span>
        <span><span class="textHighLight userNote2 userNote3">CTION</span>,</span>
    </div>

Answer 2

var getLength = function (element) {
    var c = 0;
    element.find('.textHighLight').each(function(i, e){
        var elem_classes = $(e).attr('class').split(' ');
        for (var i = 0; i < elem_classes.length; i++) {
            if (elem_classes[i].indexOf('userNote') > -1) {
                c++;
            }
        }
    });
    return c;
};

alert(getLength($('#second')));

Answer 3

这不是filter的用途。 filter会将匹配元素集合过滤到相等或更小的集合。如果你要过滤一组5个元素，你永远不会得到10。

您只需使用each循环播放该集。

http://jsfiddle.net/L9v2r9g7/11/

var getLength = function (element) {
    var classLength = 0;

    element.find('.textHighLight').each(function(index){
        classLength += this.className.split(' ').reduce(function(cNum, cName){
            return cName.substring(0, 8) === 'userNote' ? cNum + 1 : cNum;
        }, 0);
    });

    return classLength;
}

Answer 4

其他解决方案fiddlejs

var getLength = function (element) {
    return element.find("[class]").map(function() {
        return this.className;
    }).get().join().match(/userNote/g).length;
}
var second = getLength($('#second'));
alert(second)

如何通过起始值查找班级名称长度？

4 个答案: