javascript - why does $('el')[0].className work but not $('el').className? - Stack Overflow

admin管理员组

文章数量:1292243

I noticed that className property doesn't work inside jQuery without the index, why is that?

Also, are there other mon JS properties / methods that don't work as expected inside jQuery?

HTML:

<div class="par">test</div>

JQuery:

$(function () {

    var el = $('.par');

    el.className += ' new class'; // doesn't work
    el[0].className += ' new class'; // works
});

I noticed that className property doesn't work inside jQuery without the index, why is that?

Also, are there other mon JS properties / methods that don't work as expected inside jQuery?

HTML:

<div class="par">test</div>

JQuery:

$(function () {

    var el = $('.par');

    el.className += ' new class'; // doesn't work
    el[0].className += ' new class'; // works
});

• javascript
• jquery

Share Improve this question Follow asked May 16, 2013 at 18:46 dzumla011dzumla011 61233 gold badges88 silver badges2020 bronze badges 7

• 7 Because one is a DOM Node and has a className property while the other is a jQuery object which does not have a className property. – Kevin B Commented May 16, 2013 at 18:47
• But for example value works inside of jquery – dzumla011 Commented May 16, 2013 at 18:47
• No it doesn't, val() works with jQuery; value works only with DOM nodes. – David Thomas Commented May 16, 2013 at 18:48
• Then maybe I made a mistake. So none of regular JS properties can be used inside jQuery? – dzumla011 Commented May 16, 2013 at 18:48
• 1 jQuery methods can only be used on jQuery objects; native DOM properties/methods can only be used on native DOM nodes. – David Thomas Commented May 16, 2013 at 18:49

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 10

var el = $('.par'); returns a jQuery object. className is a property on Element and not on jQuery object.

The jQuery object has an array like definition so el[0] returns the underlying Element which has className property.

As far as I know, jQuery doesn't like developer updating its property directly. It simply exposes variety of utility functions for easy developement.

Quoting on a nice ment from David Thomas below,

jQuery methods can only be used on jQuery objects; native DOM properties/methods can only be used on native DOM nodes

Note: var el = $('.par'); returns a collection of Element and el[0] returns the first element in that list.

You could use .addClass to add a class to the element.

To the first element,

el.eq(0).addClass('new_class');

To all elements,

el.addClass('new_class');

More Reading:

1. https://developer.mozilla/en-US/docs/Web/API/element
2. https://developer.mozilla/en-US/docs/DOM/element.className

var el = $('.par');

gives you a jQuery object, which may contain one or more DOM elements.

var el = $('.par')[0];

returns the first DOM object in the selection of that jQuery object. className is a property on a DOM element, not on a jQuery object

$('.par').attr('class'); 

would be the jQuery way to get the className of the first element.

If you just want to add a particular class to elements matching another class, you can use

$('.par').addClass('testclass'); 

This will add the test class to all elements with the par class, while your method will only add it to the first element on the page.

Other properties

Also, are there other mon JS properties / methods that don't work as expected inside jQuery?

Most dom properties will not work directly on a jQuery object. You can use [0] to get the raw dom element for the first matched element for those. However most of them also have straightforward equivalents in jQuery. The advantage of using the jQuery versions is that they're often simpler, and work consistently across browsers. Native dom properties tend to be faster to access though.

className is part of the api for a DOM element.

var el = $('.par'); will return a jQuery object with an array of elements.

Using el[0] accesses the first element which has access to the api.

jQuery provides an easy method for adding classes to an element or group of elements matched by a selector called addClass. You could use this:

var el = $('.par');
el.addClass('new class');

Also note that it is usually best practice to name variables which contain a jQuery object with $ like this:

var $el = $('.par'); 

The jQuery DOM object is actually a list of matching elements. Since you're setting a variable on a list of DOM elements, jQuery can't apply them to the entire list. el[0] is the first matched element. (If you have more than one element, using el[0] will only set the first matched element, and if there aren't any matches, el[0] will raise a ValueError.) You should probably use jQuery's builtin class manipulation functions:

el.addClass("new class");

to remove the classes:

el.removeClass("new class");

and to toggle them:

el.toggleClass("new class");

This might not be directly related to the question, but if you're working with jQuery, then you should also be using jQuery's easy to use methods to modify the classname's of all DOM elements within a jQuery object.

http://api.jquery./addClass/ http://api.jquery./toggleClass/ http://api.jquery./removeClass/

$(function () {

    var cname = $('.par').attr('class'); // get class attribute
    if (!$('.par').hasClass('some-new-class')) {
        $('.par').addClass('some-new-class');
    }
});

本文标签： javascriptwhy does (39el39)0className work but not (39el39)classNameStack Overflow