jQuery: The Write Less, Do More JavaScript Library

Traversing/slice

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

slice( start, [end] )

Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.
Arguments:
startInteger
Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection.
end (Optional)Integer
Where to end the subset. If unspecified, ends at the end of the selection.

Examples:
Turns divs yellow based on a random slice.

    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end) 
        $div.slice(start, end).css("background", "yellow");   
       else
        $div.slice(start).css("background", "yellow");
      
      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }

    $("button").click(colorEm);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end) 
        $div.slice(start, end).css("background", "yellow");   
       else
        $div.slice(start).css("background", "yellow");
      
      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }

    $("button").click(colorEm);

  });
  </script>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
</head>
<body>
  <button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Selects all paragraphs, then slices the selection to include only the first element.

$("p").slice(0, 1).wrapInner("<b></b>");

Selects all paragraphs, then slices the selection to include only the first and second element.

$("p").slice(0, 2).wrapInner("<b></b>");

Selects all paragraphs, then slices the selection to include only the second element.

$("p").slice(1, 2).wrapInner("<b></b>");

Selects all paragraphs, then slices the selection to include only the second and third element.

$("p").slice(1).wrapInner("<b></b>");

Selects all paragraphs, then slices the selection to include only the third element.

$("p").slice(-1).wrapInner("<b></b>");

NameType

Retrieved from "http://docs.jquery.com/Traversing/slice"