parent vs parentNode

The jQuery .parent() selector selects the immediate parent of all the nodes in the node set. However, since in your example the node set is just one node $(this), there's little practical difference.

This difference matters if you were to do something like $(".foo").parent(), where there might be many nodes that have the class foo.

parentNode is native JS, where parent() is not.

What you are doing in your code is wrapping the DOM elements in the jQuery object so you can call jQuery specific methods on it. So, you cannot call index() on just this.parentNode, but you can call it on $(this.parentNode).index() since it has than become a jQuery object.

Your first example wraps the current DOM element as jQuery object and than uses the jQuery parent() method to retrieve it's parent and then the index of that parent. Your second example directly wraps the parentnode.