jQuery UI - What does this equate to?

Question

I'm reading the source of a jquery-ui widget that I am extending, and I am completely stumped by this one line of code.

this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement

If I understand this correctly, that means the above can only equate to two things:

this.placeholder["next"]()[0] !== itemElement
this.placeholder["prev"]()[0] !== itemElement

What is it trying to do? How can it execute an array key?

This is where this.placeholder is defined:

_createPlaceholder: function(that) {
    that = that || this;
    var className,
        o = that.options;

    if(!o.placeholder || o.placeholder.constructor === String) {
        className = o.placeholder;
        o.placeholder = {
            element: function() {

                var nodeName = that.currentItem[0].nodeName.toLowerCase(),
                    element = $( "<" + nodeName + ">", that.document[0] )
                        .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
                        .removeClass("ui-sortable-helper");

                if ( nodeName === "tr" ) {
                    that.currentItem.children().each(function() {
                        $( "<td>&#160;</td>", that.document[0] )
                            .attr( "colspan", $( this ).attr( "colspan" ) || 1 )
                            .appendTo( element );
                    });
                } else if ( nodeName === "img" ) {
                    element.attr( "src", that.currentItem.attr( "src" ) );
                }

                if ( !className ) {
                    element.css( "visibility", "hidden" );
                }

                return element;
            },
            update: function(container, p) {

                // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
                // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
                if(className && !o.forcePlaceholderSize) {
                    return;
                }

                //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
                if(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css("paddingTop")||0, 10) - parseInt(that.currentItem.css("paddingBottom")||0, 10)); }
                if(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css("paddingLeft")||0, 10) - parseInt(that.currentItem.css("paddingRight")||0, 10)); }
            }
        };
    }

    //Create the placeholder
    that.placeholder = $(o.placeholder.element.call(that.element, that.currentItem));

    //Append it after the actual current item
    that.currentItem.after(that.placeholder);

    //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
    o.placeholder.update(that, that.placeholder);

}

If anyone could shed some light on this I would really appreciate it.

Answer 1

It's getting either the previous or next DOM element. Since jQuery returns an array-like object, [0] is the first DOM item stored.

this.placeholder.prev() 

is the same as

this.placeholder["prev"]()

The latter is called bracket notation.