-1
\$\begingroup\$

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>
\$\endgroup\$
1
\$\begingroup\$

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');
    });
});
| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ I tried to move the <br> outside of the UL but this allowed the LI elements to appear side to side. So this is something in the template I will have to fix. \$\endgroup\$ – James Wilson Sep 11 '13 at 21:13
  • \$\begingroup\$ Are you sure prev works like that? jsfiddle.net/itay1989/bL4Qv/1 \$\endgroup\$ – Itay Sep 11 '13 at 21:20
  • \$\begingroup\$ Alright I moved the br tag outside the UL and updated it and this is working, I like this method and the method @Itay provided. \$\endgroup\$ – James Wilson Sep 11 '13 at 21:25
  • \$\begingroup\$ @Itay - yes, prev() works like that, but the selector passed to prev is a filter, it only traverses to the first previous element and checks if that element matches the filter, it does not jump elements if you pass a selector. \$\endgroup\$ – adeneo Sep 11 '13 at 21:38
  • \$\begingroup\$ @JamesWilson - if removing the break makes the LI elements float side by side, you have CSS that makes them float side by side, as that is not the default behaviour. \$\endgroup\$ – adeneo Sep 11 '13 at 21:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.