JavaScript Tutorial/jQuery/slice
Содержание
Slice li under a ul
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
var tmpExample = {
ready : function() { $("ul#uiID li").slice(0, 4).addClass("justAdd"); }
}; $(document).ready(tmpExample.ready);
</script> <style type="text/css">
ul#uiID {
list-style: none; margin: 0; padding: 0;
} ul#uiID li {
margin: 1px; padding: 3px;
} li.justAdd {
background: #fcc16e;
}
</style> </head> <body id="tmpExample">
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
</body>
</html></source>
Slice paragraphs to include only the second and third element.
<source lang="javascript">
$("p").slice(1).wrapInner("");</source>
Slices paragraphs to include only the first and second element.
<source lang="javascript">
$("p").slice(0, 2).wrapInner("");</source>
Slices paragraphs to include only the second element.
<source lang="javascript">
$("p").slice(1, 2).wrapInner("");</source>
Slice start and end
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function colorEm() { var $div = $("div"); $div.css("background", "red"); $div.slice(2, 4).css("background", "yellow"); } $("button").click(colorEm); }); </script> <style> div { width:40px; height:40px; margin:10px; float:left;} </style> </head> <body> <body> <button>Click the button</button>
</body>
</html></source>
Slice start till ends
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function colorEm() { var $div = $("div"); $div.css("background", "red"); $div.slice(2).css("background", "yellow"); } $("button").click(colorEm); }); </script> <style> div { width:40px; height:40px; margin:10px; float:left;} </style> </head> <body> <body> <button>Click the button</button>
</body>
</html></source>
slice to the end
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
var tmpExample = {
ready : function() { $("ul#uiID li").slice(5).addClass("justAdd"); }
}; $(document).ready(tmpExample.ready);
</script> <style type="text/css">
ul#uiID {
list-style: none; margin: 0; padding: 0;
} ul#uiID li {
margin: 1px; padding: 3px;
} li.justAdd {
background: #fcc16e;
}
</style> </head> <body id="tmpExample">
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
</body>
</html></source>