Question

我有这样的代码：如何使用jQuery从头到尾选择范围（我已经评论过）并将该范围内的所有p和a标记更改为另一种颜色（可能是黄色...）。（我希望解决方案可以使用，即使我们在该范围之间有更多标签）。

<div class="test1">
        <a> 1 </a>
        <p title="hihi" style="color:red"> 2 </p> <!-- first -->
        <p> 3 </p>
        <p> 4 </p>
        <a> 5.0 </a>
        <div> 5.1 </div>
        <a> 6.0 </a>
       <div> 5.1 </div>            
        <p> 7 </p>
        <p> 8</p>
        <p> 9</p>
        <span></span>
        <p> 10</p>//end
        <div>11</div>
        <p>12</p>
        <span>13</span>
    </div>

Answer 1

使用:gt()和:lt()选择器（大于和小于）：

$('div.test1').find('(a,p):lt(13):gt(0)').css('color','yellow');

带有10的p是div的子元素，索引为12，因此必须小于13才能将其包含在范围内。

Answer 2

你的意思是这样的：

;(function($) {
    /** $(ele).childrenRange(MIXED VAR);
     *  Select a range of children elements using either integers or string selectors.
     *
     *      With Int Params
     *  @param (Integer) arg1 The lowest child's index value
     *  @param (Integer) arg2 The highest child's index value (not required)
     *
     *      With String Params
     *  @param (String) arg1 jQuery string selector for first child sought
     *  @param (String) arg1 jQuery string selector for last child sought (Not Required)
     *  */
    function childrenRange() {
        var $ele = arguments[0],
            args = Array.prototype.slice.call(arguments, 1)
        if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
        if ($ele) {
            var first = $ele.children(':first'),
                last = $ele.children(':last');
            if (!args.length) return $ele.children();
            if (1 <= args.length) {
                if ('number' == typeof args[0]) first = $ele.children().eq(args[0]);
                else if ('string' == typeof args[0]) first = $ele.children(args[0]).first();
            }
            if (2 == args.length) {
                if ('number' == typeof args[0]) last = $ele.children().eq(args[1]);
                else if ('string' == typeof args[0]) last = $ele.children(args[1]).last();
            }
            return first.nextUntil(last).andSelf().add(last);
        }
        throw new Error("Invalid Parent Selector");
    }
    $.extend({ childrenRange: childrenRange });
    $.fn.extend({
        childrenRange: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.childrenRange.apply($, args);
        }
    });
})(jQuery);

然后你可以使用简单的：

//  with just one string param
$('.test1').childrenRange('[style="color:red"]').css({ 'color': 'yellow' });
//  with just two string param (first, last)
$('.test1').childrenRange('[style="color:red"]', '.some-class').css({ 'color': 'yellow' });

//  with just 1 integers 
$('.test1').childrenRange(3).css({ 'color': 'yellow' });
//  with just 2 integers (first, last)
$('.test1').childrenRange(3, 5).css({ 'color': 'yellow' });

在this jsFiddle处以更多方式查看它。

我如何在一个范围内选择一些标签

2 个答案: