JavaScript DHTML/jQuery/slice
Содержание
Slice li under a ul
<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">
<ul id="uiID">
<li class="liClass1">A</li>
<li class="liClass1">B</li>
<li class="liClass1">C</li>
<li class="liClass1">D</li>
<li class="liClass2">E</li>
<li class="liClass2">F</li>
<li class="liClass2">G</li>
<li class="liClass2">H</li>
<li class="liClass3">I</li>
<li class="liClass3">J</li>
</ul>
</body>
</html>
Slice paragraphs to include only the second and third element.
$("p").slice(1).wrapInner("<b></b>");
Slices paragraphs to include only the first and second element.
$("p").slice(0, 2).wrapInner("<b></b>");
Slices paragraphs to include only the second element.
$("p").slice(1, 2).wrapInner("<b></b>");
Slice start and end
<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Slice start till ends
<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
slice to the end
<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">
<ul id="uiID">
<li class="liClass1">A</li>
<li class="liClass1">B</li>
<li class="liClass1">C</li>
<li class="liClass1">D</li>
<li class="liClass2">E</li>
<li class="liClass2">F</li>
<li class="liClass2">G</li>
<li class="liClass2">H</li>
<li class="liClass3">I</li>
<li class="liClass3">J</li>
</ul>
</body>
</html>