JQuery页面定位

需求描述：

1、如上图，当VFC的过滤条件存在时，页面加载时滚动到VFC值的位置。

2、当页面向下滚动一定高度时，常用按钮被隐藏，为了用户体验良好，将常用按钮固定显示。

3、当使用多个input输入数据时，当input失去焦点、点击enter时，判断是否有下一个input，若有，聚焦到下一个input输入框行尾。

JQuery效果实现：

1、

 function setupProductsSitePageRankPage() {
        var $productSitePageRankMoudle = $('.products-sitepage-rank-page'),
            $modalRank = $productSitePageRankMoudle.find('.change-rank-modal'),
            $submitRank = $modalRank.find('.submit-rank-form'),
            $checkboxes = $productSitePageRankMoudle.find('.checkboxes'),
            $inputNum = $productSitePageRankMoudle.find('.input-number'),
            vfcText = $productSitePageRankMoudle.find('.vfc-text').val(),
            $obj;

        //if no checkbox is checked,'change rank' button is disabled.
        if ($('input[type=checkbox]:checked').length > 0) {
            $('.change-rank-btn').prop('disabled', false);
            $('.change-rank-btn').removeClass('disabled');
        } else {
            $('.change-rank-btn').prop('disabled', true);
            $('.change-rank-btn').addClass('disabled');
        }

        //Window scroll to where matched the vfc.
        function getJqObjByText(content) {
            var $ele;
            $("span:contains('" + content + "')").each(function () {
                if (this.innerHTML == content) {
                    $ele = $(this); //获取jquery对象
                    return false; //加上这句，在找到第一个符合的元素时跳出$.each。
                }
            });
            return $ele;
        }

        $("html,body").animate({
            scrollTop: getJqObjByText(vfcText).offset().top - 100
        }, 400);

        //With the window scrolled up util'change rank'btn,fix the btn. 
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $('.fixed-change-rank').show();
            } else {
                $('.fixed-change-rank').hide();
            }
        });

        //Change Rank modal on submit,location reload.
        $modalRank.find('.submit-rank-btn').on('click', function () {
            var $this = $(this),
                rank = $modalRank.find('.rank').val(),
                pvlist = [],
                pv,
                jsonval;

            $productSitePageRankMoudle.find('.checkboxes').each(function () {
                var $this = $(this);

                if ($this.prop('checked')) {
                    jsonval = $this.data('json');
                    pvlist.push(jsonval);
                }
            });

            pv = JSON.stringify(pvlist);

            $.ajax({
                url: getUncachedUrl($this.data('url')),
                type: 'POST',
                data: {
                    pv: pv,
                    rank: rank
                },
                success: function (data) {
                    //console.log(data);  
                    if (data.status === 's') {
                        toastr.success(data.message);
                        location.reload(true);
                    } else {
                        toastr.error(data.message);
                    }

                    $this.removeClass('loading');
                },
                error: function () {
                    showNotificationError();
                    $this.removeClass('loading');
                }
            });
            return false;
        });

        //Page Rank changed.
        $inputNum.on('change', function () {
            var $this = $(this),
                rank = $this.val(),
                jsonval = $this.closest('tr').find('.checkboxes').data('json'),
                pvlist = [],
                pv;

            pvlist.push(jsonval);

            pv = JSON.stringify(pvlist),

            $.ajax({
                url: getUncachedUrl('/products/sitepagerankhandler'),
                type: 'POST',
                data: {
                    act: 'edit-rank',
                    pv: pv,
                    rank: rank
                },
                success: function (data) {
                    //console.log(data);  
                    if (data.status === 's') {
                        toastr.success(data.message);
                        //location.reload(true);
                    } else {
                        toastr.error(data.message);
                    }

                    $this.removeClass('loading');
                },
                error: function () {
                    showNotificationError();
                    $this.removeClass('loading');
                }
            });
        });

        $inputNum.on('keypress', function (e) {
            var $this = $(this);

            if (e.which === 13) {
                $this.blur();

                if ($this.parent().parent().next('tr').find('.input-number')) {
                    var content = $this.parent().parent().next('tr').find('.input-number').val();
                    $this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);
                } else {
                    return false;
                }
            }
        });
    }

注意：

1、获取非input元素的文本值，如div。如果div里含有多个级别的div，则用获取文本内容。

span:contains('" + content + "')

2、将光标定位到行尾的操作，等价于把input中原有的内容复制再把值赋给input。

var content = $this.parent().parent().next('tr').find('.input-number').val();
$this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);