JQuery check with regex and add class

Question

In my HTML there are number of divs each having names inside. I have to implement alphabetic filter in it. If user clicks on button 'A-J' the list will make only divs where first letter of name is between A-J and similarly for other letter groups. I have written following piece of code till now :

        $("#jfmfs-filter-selected-aj").click(function(event) {
            event.preventDefault();
            for (i = 0; i < all_friends.length ; i++)
            {
                var aFriend = $( all_friends[i] );
                if(!(/^[a-jA-J]+$/.test(aFriend.find(".friend-name").html().charAt(0)))){
                    aFriend.addClass("hide-filtered");
                }
            }
            $(".filter-link").removeClass("selected");
            $(this).addClass("selected");
        });

This Code works fine but hides div in a loop and hence it takes time. Is there a way i can write the above code in single line to add "hide-filtered" class to all divs which meets my criteria in one go Something like this?

all_friends.not( {divs with inner html starting with letters a-j} ).addClass("hide-non-selected");
all_friends.not( /^[a-jA-J]+$/.test(all_friends.find(".friend-name").html().charAt(0)) ).addClass("hide-non-selected");

Final Solution I used using jquery filter (Barmar's answer):

all_friends.filter(function() {
                      return(!(/^[a-fA-F]+$/.test($(this).find(".friend-name").html().charAt(0))))
                    }).addClass("hide-non-selected");

Looks like [this][1] is the kind of stuff you're looking for.. [1]: stackoverflow.com/questions/190253/… — Aidan Ewen
– Aidan Ewen, Commented Dec 1, 2012 at 9:04
@AidanEwen jQuery regex selectors can only be applied to attributes, not to text. — Barmar
– Barmar, Commented Dec 1, 2012 at 9:07

Barmar · Accepted Answer · 2012-12-01 09:30:55Z

2

Try this:

var AJ_regex = /^[a-jA-J]/;
$('.friend-name', aFriend).filter(function() {
    return !(AJ_regex.test($(this).html()));
}).addClass("hide-filtered");

edited Dec 1, 2012 at 9:30

answered Dec 1, 2012 at 9:11

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vishwesh Shetty Over a year ago

Thanks I have updated my question with the final solution I used.

Beetroot-Beetroot Over a year ago

The simplest and biggest efficiency saving you could make is to create the regular expression outside the loop (and .filter() is effectively a loop).

Barmar Over a year ago

@Beetroot-Beetroot Thanks for the suggestion, I made that change to my answer. This also suggests that if he has different filters, he could use a single function and pass the RE as a parameter.

Beetroot-Beetroot Over a year ago

By the way, your solution (before moving the regexp out of the loop), although concise, is probably less efficient than the OP's original in that it loops three times - once to apply the selector, once to filter, and once to apply the class. Only the first is a big deal. On efficiency grounds, it is better to use a preformed collection rather than make a new one, especially when making/changing the selection involves the DOM.

Barmar Over a year ago

@Beetroot-Beetroot That's probably true of many chained jQuery operations, since each step in the chain is another loop over the collection, and this is a common idiom. It's not usually a problem if the collection is small.

|

Aidan Ewen · Accepted Answer · 2012-12-01 09:35:10Z

0

Have a look at this jquery filter by James Padolsey. It looks like you could use this to do the kind of thing you're looking for.

For your purposes it would look something like -

$('div.friend-name').filter('div:regex(innerHTML, ^[a-jA-J])').addClass("hide-non-selected");

(that will probably need tweaking - I've not tested it).

edited Dec 1, 2012 at 9:35

answered Dec 1, 2012 at 9:11

Aidan Ewen

13.4k11 gold badges69 silver badges92 bronze badges

Collectives™ on Stack Overflow

JQuery check with regex and add class

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related