1

when I use this Code $('#pills-testscript-tab') then I get this result in Chrome dev tools: 

k.fn.init [a#pills-testscript-tab.nav-link]`

This result is expandable and I can access all its functions. If I instead use $('[data-toggle="pill"]')[1] which is exactly the same DOM Element then I don't have access to all it's functions and the result in dev tools is: 

<a class="nav-link" id="pills-testscript-tab" data-toggle="pill" href="#pills-testscript" role="tab" aria-controls="pills-testscript" aria-selected="false">Test Script</a>

This is not expandable.

I also tried to find a Function within the $('[data-toggle="pill"]')[1] object which provides me the same set of Functions like in the $('#pills-testscript-tab') object, but couldn't find any.

I don't understand why there is a difference. It might be that a Children Action [1] changes the behaviour in the result. If someone has any Idea let me know.

Thank's a lot!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Dirk Schiller
  • 491
  • 6
  • 18
  • 1
    To get a better understanding of JQuery objects and DOM Elements [read this](https://stackoverflow.com/a/6974603/7021694) – Ali Elkhateeb May 16 '19 at 07:30

1 Answers1

1

If I instead use $('[data-toggle="pill"]')[1] which is exactly the same DOM Element...

This is not the case. The first example, $('#pills-testscript-tab') returns a jQuery object.

The second example, $('[data-toggle="pill"]')[1], is returning the second Element object found within a jQuery object because you're using an index accessor. This is why you see the difference in the console.

To return the second element in a collection as a jQuery object use eq():

var $foo = $('[data-toggle="pill"]').eq(1);
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339