是否有内置的方法来选择最近的兄弟姐妹

Question

考虑下面的结构

按钮http://i62.tinypic.com/2j0ceh2.jpg

我想要的是在点击按钮时选择最接近的9个按钮,然后让我们改变bg颜色.这是我的自定义代码已经做到了

$(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 ..在某种程度上使用jquery选择器的块是蹩脚的.当然,如果必须,我们必须使用它,但在这种情况下,我们呢？是否有任何内置方法可以在jquery中为此目的进行链接？

这里是玩弄的小提琴.

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 小提琴演示。

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

(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 小提琴演示。

不幸的是，直到评论中指出，我才注意到始终突出显示完整指定范围的元素的必要性，即使这使单击的元素偏离突出显示部分的中心。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 小提琴演示。

参考：

• JavaScript：
  • 条件（“三元”）运算符 ( condition ? conditionIsTrue : conditionIsFalse)。
  • Math.floor()。
  • typeof。
• jQuery：
  • add()。
  • addBack()。
  • addClass()。
  • children()。
  • index()。
  • 大于 ( :gt()) 选择器。
  • 小于 ( :lt()) 选择器。
  • nextAll()。
  • on()。
  • parent()。
  • prevAll()。
  • removeClass()。
  • siblings()。
  • slice()。