jquery - 是否有一个内置方法来选择最近的 n 个 sibling

Question

考虑下面的结构

我想要的是在单击按钮时选择最近的 9 个按钮，然后更改背景颜色。这是我已经执行此操作的自定义代码

$(document).on("click", "#footer button", function(){
    var index = $(this).index();
    var len = $("#footer button").length;
    $("#footer button").css({
        "background-color" : "#ccc"
    });
    if (index < 5) $("#footer button:lt(9)").css({
        "background-color" : "#c99"
    });
    else if (index > (len - 6)) $("#footer button:gt(-10)").css({
        "background-color" : "#c99"
    });
    else $("#footer button").slice((index -4), (index + 5)).css({
        "background-color" : "#c99"
    });
});

现在，我发现使用 if .. else .. block 作为 jquery 选择器不知何故很蹩脚。当然，如果有必要的话我们必须使用它，但在这种情况下我们可以吗？ jquery 中是否有任何内置方法可以为此目的进行链接？

<强> HERE 是用来演奏的 fiddle 。

Answer 1

没有内置方法可以执行此操作，但无需使用 if/else 即可轻松完成:

$(document).on("click", "#footer button", function () {
    var that = $(this),
        index = that.index(),
        prev = that.prevAll('button:lt(4)'),
        next = that.nextAll('button:lt(4)');
    that.siblings().removeClass('highlight');
    that.add(prev).add(next).addClass('highlight');
});

JS Fiddle demo .

顺便说一句，可以轻松创建/使用一个简单的插件:

(function($){
    $.fn.rangedHighlight = function(range,highlight) {
        var that = this,
            prev = that.prevAll().slice(0,range),
            next = that.nextAll().slice(0,range);
        that.siblings().addBack().removeClass(highlight);
        that.add(prev).add(next).addClass(highlight);
        return this;
    };
})(jQuery);

$('#footer').on('click', 'button', function(){
    $(this).rangedHighlight(4,'highlight');
});

JS Fiddle demo .

不幸的是，直到评论中指出，我才注意到始终突出显示完整指定范围的元素的必要性，即使这使单击的元素偏离了突出显示部分的中心。如果不使用某种 if/else ，似乎没有任何方法可以做到这一点(尽管我正在尝试简化它)。

虽然上述内容仍然成立(没有内置方法)，但我确实决定重写插件以提供这样做的选择(如果它对您有任何用处):

(function($){
    $.fn.rangedHighlight = function(opts) {
        var that = this,
            index = that.index(),
            s = $.extend({
                'range' : 9,
                'highlight' : 'highlight',
                'highlightClicked' : false,
                'alwaysShowFull' : true,
                'returnRange' : false
            }, opts),
            eitherSide = Math.floor(s.range - 1)/2,
            all = that.parent().children(),
            leftLimited = index < eitherSide,
            rightLimited = index > all.length - eitherSide - 1,
            rangeMin, rangeMax, returnObject;

        that.addClass(s.highlightClicked, 'string' === typeof s.highlightClicked);

        if (!leftLimited && !rightLimited) {
            rangeMin = index - eitherSide;
            rangeMax = index + eitherSide + 1;
        }
        else if (s.alwaysShowFull && (leftLimited || rightLimited)) {
                rangeMin = leftLimited ? 0 : all.length - s.range;
                rangeMax = leftLimited ? s.range : all.length;
        }
        else if (!s.alwaysShowFull && (leftLimited || rightLimited)) {
                rangeMin = leftLimited ? 0 : index - eitherSide;
            rangeMax = leftLimited ? index + eitherSide + 1 : all.length;
        }

        that.siblings('.' + s.highlight).removeClass(s.highlight);
        all.slice(rangeMin, rangeMax).addClass(s.highlight);

        returnObject = s.returnRange === false ? this : all.slice(rangeMin,rangeMax);

        return returnObject;
    };
})(jQuery);

$('#footer').on('click', 'button', function(){
    $(this).rangedHighlight({
        // Number: number of elements _in total_ to be highlighted:
        'range' : 7,
        // String: the class-name to be applied to selected elements:
        'highlight' : 'highlight',
        // Boolean: shows the full range even if that range 'overlaps'
        // the start/end points:
        'alwaysShowFull' : true,
        // Boolean: return the selected range (true) or the clicked
        // element (true), for chaining purposes:
        'returnRange' : false,
        // String: specific class to add to the clicked element:
        'highlightClicked' : false,
    });
});

JS Fiddle demo .

引用文献:

JavaScript:
• Conditional ('ternary') operator (condition ? conditionIsTrue : conditionIsFalse) .
• Math.floor() 。
• typeof .
• jQuery:
  • add() .
  • addBack() .
  • addClass() .
  • children() .
  • index() .
  • Greater-than (:gt()) selector .
  • Less-than (:lt()) selector .
  • nextAll() .
  • on() .
  • parent() .
  • prevAll() .
  • removeClass() .
  • siblings() .
  • slice() .