Jquery 如何选择某个范围内的某个标记

我有这样一个代码：我如何使用jQuery从第一个到最后选择范围（我已经注释过），并将该范围内的所有

p

和

a

标记更改为另一种颜色（可能是黄色…）。 （我希望有一个解决方案可以使用，即使我们有更多的标签之间的范围）

1.
2
三,
四,

5
5.1
6
5.1
七,

八,

九,

10
//结束
11
十二,

13

使用

:gt（）

和

:lt（）

选择器（大于和小于）：

---

带10的

p

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

您的意思是这样的：

;(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);

看看它在多方面发挥作用

---

那么，在本例中，您想要从标签样式为

color:red

到结尾的所有内容吗？

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

;(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' });