Grabbing elements with a "Move Up" button

Question

When a user clicks the "Move Up" button, I grab the current elements procedureid and sortOrder. I then need for "Move Up" to grab the element above it and navigate down to a link inside the <p id="btncontainer"> element and grab that procedureid and sortorder.

This seems like a mess to me and I am afraid it could break easily because of the many chains. Is there a way to simplify this?

// Sorting on the Process page 'Procedures' tab.
    jQuery(".btnMoveUp").click(function () {
        var object = jQuery(this);
        var currProcedureID = object.data('procedureid');
        var currsortOrder = object.data('sortorder');
        //var prevProcedureID = jQuery(this).parents('li.span6').prev().prev().css("background-color", "red");
        var prevProcedureID = object.parents('li.span6').prev().prev().find('.btnContainer').find('a').data('procedureid');
        var prevSortOrder = object.parents('li.span6').prev().prev().find('.btnContainer').find('a').data('sortorder');
        console.log(currProcedureID);
        console.log(currsortOrder);
        console.log(prevProcedureID);
        console.log(prevSortOrder);
    });

HTML:

<ul class="commentlist">
        <li class="span6">
            <img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
            <div class="comment-info">
                <h4>
                    <a href="/MasterList/ViewProcedure/123">
                        XYZ Process Server</a></h4>
                <h5>
                    <small>Owner: </small><a href="javascript:void(0);">user</a></h5>
                <br>
                <p>
                    Enter Description for XYZ Process Server Procedure
                </p>
                <br>
                <p class="btnContainer">

                        <a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="123" data-sortorder="1"><span class="iconfa-double-angle-down">
                        </span>Move Down</a>

                </p>
            </div>
        </li>
        <br style="clear: both;">
        <li class="span6">
            <img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
            <div class="comment-info">
                <h4>
                    <a href="/MasterList/ViewProcedure/122">
                        XYZ2 Process Server</a></h4>
                <h5>
                    <small>Owner: </small><a href="javascript:void(0);">user</a></h5>
                <br>
                <p>
                    Enter Description for XYZ1 Process Server Procedure
                </p>
                <br>
                <p class="btnContainer">
                        <a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="122" data-sortorder="2"><span class="iconfa-double-angle-up icon-white">
                        </span>Move Up</a> 

                        <a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="122" data-sortorder="2"><span class="iconfa-double-angle-down">
                        </span>Move Down</a>

                </p>
            </div>
        </li>
        <br style="clear: both;">
        <li class="span6">
            <img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
            <div class="comment-info">
                <h4>
                    <a href="/MasterList/ViewProcedure/121">
                        XYZ3 Process Server</a></h4>
                <h5>
                    <small>Owner: </small><a href="javascript:void(0);">user</a></h5>
                <br>
                <p>
                    Enter Description for XYZ3 Process Server Procedure
                </p>
                <br>
                <p class="btnContainer">
                        <a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="121" data-sortorder="3"><span class="iconfa-double-angle-up icon-white">
                        </span>Move Up</a> 

                        <a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="121" data-sortorder="3"><span class="iconfa-double-angle-down">
                        </span>Move Down</a>

                </p>
            </div>
        </li>
        <br style="clear: both;">
        <li class="span6">
            <img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
            <div class="comment-info">
                <h4>
                    <a href="/MasterList/ViewProcedure/120">
                        XYZ4 Process Server</a></h4>
                <h5>
                    <small>Owner: </small><a href="javascript:void(0);">user</a></h5>
                <br>
                <p>
                    Enter Description for XYZ4 Process Server Procedure
                </p>
                <br>
                <p class="btnContainer">
                        <a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="120" data-sortorder="4"><span class="iconfa-double-angle-up icon-white">
                        </span>Move Up</a> 


                </p>
            </div>
        </li>
        <br style="clear: both;">

</ul>

Answer 1

Don't rely on prev() to traverse <br> tags and other strange code that isn't valid, as a <br> tag can't be a direct child of an UL.

If you remove the <br> tag you can use prev('li') to get the previous li :

jQuery(function($) {
    $(".btnMoveUp").on('click', function () {
        var $this           = $(this),
            currProcedureID = $this.data('procedureid'),
            currsortOrder   = $this.data('sortorder'),
            $prevLi         = $this.prev('li'),
            $anchor         = $prevLi.find('.btnContainer a'),
            prevProcedureID = $anchor.data('procedureid'),
            prevSortOrder   = $anchor.data('sortorder');
    });
});