JavaScript Tutorial/jQuery/filter
Содержание
- 1 Filter by function
- 2 Filter by ID
- 3 Filter by index
- 4 Filter class out
- 5 Filter content
- 6 filter(expr): narrow down the results of a search.
- 7 filter(fn) function is called with a context equal to the current element
- 8 Filter out element and add style
- 9 Filters out all elements matching the given selector
- 10 filter with customized function
Filter by function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "blue")
.filter(function (index) {
return index == 1 ;
})
.css("border", "1px solid red");
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
<div id="first">asdf</div>
<div id="second">asdf</div>
<div id="third">asdf</div>
<div id="fourth">asdf</div>
<div id="fifth">asdf</div>
<div id="sixth">asdf</div>
</body>
</html>
Filter by ID
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "blue")
.filter(function (index) {
return $(this).attr("id") == "fourth" ;
})
.css("border", "1px solid red");
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
<div id="first">asdf</div>
<div id="second">asdf</div>
<div id="third">asdf</div>
<div id="fourth">asdf</div>
<div id="fifth">asdf</div>
<div id="sixth">asdf</div>
</body>
</html>
Filter by index
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "blue")
.filter(function (index) {
return index == 1 ;
})
.css("border", "1px solid red");
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
<div id="first">asdf</div>
<div id="second">asdf</div>
<div id="third">asdf</div>
<div id="fourth">asdf</div>
<div id="fifth">asdf</div>
<div id="sixth">asdf</div>
</body>
</html>
Filter class out
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "yellow").filter(".blue").css("border-color", "red");
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
<div class=blue>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
Filter content
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
});
</script>
</head>
<body>
<body>
<p>Hello <span>span</span>data</p>
</body>
</html>
filter(expr): narrow down the results of a search.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("color", "red");
});
</script>
</head>
<body>
<body>
<div class="middle">asdf</div>
<div>asdf</div>
</body>
</html>
filter(fn) function is called with a context equal to the current element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("background", "#b4b0da")
.filter(function (index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border", "3px double red");
});
</script>
</head>
<body>
<body>
<div class="middle">asdf</div>
<div>asdf</div>
</body>
</html>
Filter out element and add style
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("li")
.filter(".my3")
.addClass("tmpSelected");
}
);
</script>
<style type="text/css">
ul {
list-style: none;
margin: 5px;
padding: 0;
}
li.tmpSelected {
background: #a1e6b2;
border: 4px solid #93daa4;
}
</style>
</head>
<body>
<ul>
<li class="my">A</li>
<li class="my2">B</li>
<li class="my">C</li>
<li class="my2">D</li>
<li class="my3">E</li>
</ul>
</body>
</html>
Filters out all elements matching the given selector
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:not(:checked) + span").css("background-color", "yellow");
});
</script>
</head>
<body>
<form>
<input type="checkbox" name="a" />
<span>A</span>
<input type="checkbox" name="b" />
<span>B</span>
<input type="checkbox" name="c" checked="checked" />
<span>C</span>
</form>
</body>
</html>
filter with customized function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("li")
.filter(
function() {
return $(this).hasClass("my2") || $(this).hasClass("my3");
}
)
.addClass("mySelected");
}
);
</script>
<style type="text/css">
ul {
list-style: none;
margin: 5px;
padding: 0;
}
li.mySelected {
background: #a1e6b2;
border: 4px solid #93daa4;
}
</style>
</head>
<body>
<ul>
<li class="my3">A</li>
<li class="my2">B</li>
<li class="my3">C</li>
<li class="my2">D</li>
<li class="my">E</li>
</ul>
</body>
</html>