jQuery .eq(index) vs [index] if both return an object?

Question

I'm having some trouble distinguishing why exactly one method works and the other one doesn't. I have a workable solution by using .eq() but wanted to understand properly why I can't call the .css method using the [] notation if it still returns an object?

Here is my test code, tried to figure it out myself:

$('.slider').each(function() {
  var $slides = $('.slide');

  console.log(jQuery.type($slides.eq(1)));
  console.log(jQuery.type($slides[2]));

  $slides.eq(1).css( {color: 'red'} );
  $slides[2].css( {color: 'red'} );
});

console logs tell me that both selectors are returning an object. So why do I get a typeError on the [] notation like it isn't an object?

Appreciate any clarification.

Thanks,

Jason Sperske · Accepted Answer · 2017-11-17 00:33:31Z

3

The array syntax returns an object but if you want to access JQuery functions on it you will need to call $(object) on it, where .eq() returns a JQuery object. For example:

console.log('By eq:', $('button').eq(0).text())
console.log('By Array as a JQuery Object', $( $('button')[0]).text())
try {
  console.log('By Array:', $('button')[0].text())
} catch(e) {
  console.log('You get an exception because the element doens\'t have a  property named text');
  console.log(e);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A button</button>

answered Nov 17, 2017 at 0:33

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

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

2 Comments

Hamms Over a year ago

also note that "object" is the most generic internal javascript class, and that jQuery.type on even a raw HTML element returns "object". In fact, since $slides[2] is a raw HTML element, that's exactly what's happening

Dean Potter Over a year ago

Makes perfect sense. I hadn't considered either of your points. In my mind, as $slides was a jQuery object it would remain a jQuery object despite using [ ] but now I understand. Appreciate your time and effort

Collectives™ on Stack Overflow

jQuery .eq(index) vs [index] if both return an object?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related