Difference between 'hasClass' and 'is'? Also, alternative to return Jquery element instead?

Question

Possible Duplicate:
jQuery .hasClass() vs .is()

HTML code:

<div class="results">
    <div class="table">
        <form class="tr" action="#" method="post">
            <div class="td">
                <input class="datepicker" type="text">
            </div>
            <div class="td">
                <input class="datepicker" type="text">
            </div>
            <div class="td">
                <input type="text">
            </div>
        </form>
    </div>
</div>

JS code:

$('.results').find('input:text').each(function(){
    var element = $(this);
    var b = element.hasClass('.datepicker');
    var c = element.is('.datepicker');
}

My question:

'is' and 'hasClass' is supposed to both return true when it finds an element containing the class "datepicker", correct?

Somehow, it's not. 'hasClass' returns false, and 'is' returns true.

Also, I've been digging for a solution to do some chaining jquery calls. But both 'hasClass' and 'is' returns a boolean only. Is there a JQuery function that returns a $(Jquery) element so I can do something like this? I already tried "filter" function, but seems to not work.

element.SomeFunctionToDigUpAnElementWithClass('datepicker').DoSomeCoolStuff();

================================================================

Use of `.hasClass` is much appropriate than using `.is` for this specific case. — Selvakumar Arumugam, Feb 05 '13 at 15:24
`filter` does do what I believe you are describing. I would guess you are somehow using it incorrectly. — James Montagne, Feb 05 '13 at 15:24
What happend to reading the documentation? It contains examples as well! http://api.jquery.com/hasClass/, http://api.jquery.com/is/. — Felix Kling, Feb 05 '13 at 15:28
@insertusernamehere: That's about performance differences, not what the functions are doing. — Felix Kling, Feb 05 '13 at 15:28
Thanks for the quick answer guys. Actually, I was more of looking for a solution to return a JQuery element instead of returning boolean. Are there alternative functions that do this? — Thomas Cheng, Feb 05 '13 at 15:29
hasClass should return true if you do `.hasClass('datepicker');` without the `.` — Sharlike, Feb 05 '13 at 15:39
`it finds an element containing the class "datepicker", correct?` WRONG. It returns true if the first element in the result set has the class. — Khez, Feb 05 '13 at 16:15

score 8 · Answer 1 · answered Feb 05 '13 at 15:23

8

hasClass without the dot, of course, because it's a class name. is on the other hand any selector.

element.hasClass('datepicker');

answered Feb 05 '13 at 15:23

Prinzhorn

22,120
7
61
65

score 5 · Accepted Answer · answered Feb 05 '13 at 15:23

5

hasClass() is more specific and a faster operation. is() allows you to select a wider range, for example you can do is(':checked')

http://jsperf.com/hasclass-vs-is-so

answered Feb 05 '13 at 15:23

DangerDan

519
2
13

AlecTMH · Answer 3 · 2013-02-05T15:36:53.330

1

To keep chaining you need to modify your selector:

$('.results').find('input:text.datepicker').doSomething();

or with each if you need to pass specific parameters to the next function for each input element:

$('.results').find('input:text.datepicker').each(function(){
    doSomething();
});

If you need to do something for the inputs without datepicker class set use :not selector:

$('.results').find('input:text:not(.datepicker)').doSomething();

Or even without find:

$('.results input:text.datepicker').doSomething();

edited Feb 05 '13 at 15:36

answered Feb 05 '13 at 15:30

AlecTMH

2,615
23
26

Best answer so far, with no up votes... Sad. – Khez Feb 05 '13 at 16:16

Difference between 'hasClass' and 'is'? Also, alternative to return Jquery element instead?

3 Answers3