Wie ich ein Tag in einem Bereich auswähle

Question

Ich habe diesen Code: Wie kann ich jQuery verwenden, um im Bereich von Anfang bis Ende (ich bereits kommentiert) und alle p und a Tag in diesem Bereich zu einer anderen Farbe (kann sein Gelb...). (Ich möchte eine Lösung verwenden können, sogar wir haben mehr Tag zwischen diesem Bereich).

<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

Verwenden :gt() und :lt() Selektoren (größer als und kleiner als):

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

Die p mit 10 ist ein untergeordnetes Element von div und hat den Index 12, damit es weniger als 13 sein muss, um es in den Bereich aufzunehmen.

Answer 2

Haben Sie so etwas wie dies bedeuten:

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

Dann können Sie so einfach verwenden wie:

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

Sehen Sie es in vielerlei Hinsicht auf this jsFiddle arbeiten.

See Also