CODEWITHSUNDEEP
javascriptjqueryarrays
3gwebtrain
3gwebtrain

Reputation: 15303

How to find class name length by starting value?

I am trying to find a class names by it's start name using the value, i am looking for different length according to the length of the name.

I am getting wrong result. any one help me to find the correct way. here is my works:

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!)

I understand that, I am not properly filtering the way it should be. any one help me please?

Here is the Live

Upvotes: 1

Views: 1074

Answers (4)

Diego Rodriguez
Diego Rodriguez

Reputation: 120

Other solution 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)

Upvotes: 0

Jamiec
Jamiec

Reputation: 136114

This answer uses jQuery.map to turn the array of elements into an array of numbers representing how many classes on each element start with userNote. It then uses Array.reduce to simply sum those numbers up.

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>

Upvotes: 3

James Montagne
James Montagne

Reputation: 78650

This is not what filter is used for. filter will filter the set of matched elements down to an equal or lesser set. You will never get 10 if you are filtering a set of 5 elements.

You should instead just use each to loop over the set.

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

Upvotes: 2

mrmillod
mrmillod

Reputation: 41

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

Upvotes: 2

Related Questions