[jQuery]jQuery Selector 之子元素類
:nth-child
:first-child
:last-child
:only-child
1、
:nth-child
匹配其父元素下的第N個子或奇偶元素
':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。
:nth-child 從1開始的，而:eq()是從0算起的！
可以使用:
<br>nth-child(even)
<br>:nth-child(odd)
<br>:nth-child(3n)
<br>:nth-child(2)
<br>:nth-child(3n+1)
<br>:nth-child(3n+2)
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:nth-child 匹配其父元素下的第N個子或奇偶元素
//在每個 ul 查找第 2個li
var str=' ';//此變數顯示訊息用的
$("ul li:nth-child(2)").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</body>
</html>
顯示結果：
2、
:first-child
匹配第一個子元素
':first'
只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:first-child 匹配第一個子元素
//在每個 ul 中查找第一個 li
var str=' ';//此變數顯示訊息用的
$("ul li:first-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
//':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
var str=' ';//此變數顯示訊息用的
$("ul li:first").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</body>
</html>
顯示結果：
3、
:last-child
匹配最後一個子元素
':last'
只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:last-child 匹配最後一個子元素
//在每個 ul 中查找最后一個 li
var str=' ';//此變數顯示訊息用的
$("ul li:last-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
//':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
var str=' ';//此變數顯示訊息用的
$("ul li:last").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
</body>
</html>
顯示結果：
4、
:only-child
如果某個元素是父元素中唯一的子元素，那將會被匹配
如果父元素中含有其他元素，那將不會被匹配。
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配
//在 ul 中查找是唯一子元素的 li
var str=' ';//此變數顯示訊息用的
$("ul li:only-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
</body>
</html>
顯示結果：
沒有留言:
張貼留言