jQuery get next element for the attribute within Prototype framework

Question

Hello all I am trying to get the second element in the following:

<div class="progress-button elastic">
    <button data-id="0" id="bob">
      <span>
         <img src="http://...../_thumb.png" style="width: 60px; height: 60px;padding-top: 1px;float: right;padding-right: 9px;" class="likeImg">
      </span>
    </button>
    <svg class="circle" width="70" height="70">
      <path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.95580.........">
      </path>
    </svg>
    <svg class="check" width="70" height="70">
      <path d="m31.5,46.5l15.3,-23.2"></path>
      <path d="m31.5,46.5l-8.5,-7.1"></path>
    </svg>
</div>

What I am trying to accomplish is getting the data-id attribute from the second element (that being the button)

However I am unable to get that using this code within the function that call some animation for that button:

UIProgressButton.prototype._submit = function() {
    classie.addClass( this.el, 'loading' );
    console.log(this.el);
    console.log($(this.el).next().attr('id'));

    var self = this,
        onEndBtnTransitionFn = function( ev ) {
            if( support.transitions ) {
                if( ev.propertyName !== 'width' ) return false;
                this.removeEventListener( transEndEventName, onEndBtnTransitionFn );
            }

            this.setAttribute( 'disabled', '' );

            if( typeof self.options.callback === 'function' ) {
                self.options.callback( self );
            } else {
                self.setProgress(1);
                self.stop();
            }
        };

    if( support.transitions ) {
        this.button.addEventListener( transEndEventName, onEndBtnTransitionFn );
    } else {
        onEndBtnTransitionFn();
    }
}

The console.log(this.el); shows up like the first code post above (the HTML).

When it gets to the console.log($(this.el).next().attr('id')); part, it just says undefined.

If I put console.log($(this.el).attr('class')); then I do get a value of progress-button elastic as I would expect going to the next() would work also.

What all would I be missing in order to get that value?

Answer 1

next() is trying to find the sibling of your div, not the first child (button) you are expecting.

You can instead use this.el as context, and select within it: $(this.el).children(":first") should give you the button