為什么不能用 $("#menu div .tag dl dd>a:eq(10)")
如題 JQ基礎(chǔ)中第四問為什么用?$("#menu div .tag dl dd>a:eq(10)")只能作用一處？
慕小莊
2016-10-17
2 回答
舉報
0/150
提交
取消
2016-10-17
這個問題主要是 :eq(n) 和 :nth-child(n)的不同造成的
?:eq(n)——在匹配的集合中選擇索引值為n的元素，只選擇一個
?:nth-child(n)——選擇父元素下的第n個子元素，而父元素可以有多個，導(dǎo)致這個子元素也可以有多個
2016-10-17
<!DOCTYPE?html> <html> <head> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<title>jQuery標(biāo)簽切換效果</title> ????<link?rel="stylesheet"?href="imooc.css"?type="text/css"> ????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <!--代碼部分begin--> <div?id="menu"> ????<!--tag標(biāo)題--> ????<div?id="menu_female"> ????????<h3>女裝</h3> ????????<div?class="tag"?style="display:?block;"> ????????????<dl> ????????????????<dd> ????????????????????<p>第一類</p> ????????????????????<a>1.襯衫</a> ????????????????????<a>2.T恤</a> ????????????????????<a>3.雪紡衫</a> ????????????????????<a>4.針織衫</a> ????????????????????<a>5.短外套</a> ????????????????????<a>6.衛(wèi)衣</a> ????????????????????<a>7.小西褲</a> ????????????????????<a>8.風(fēng)衣</a> ????????????????????<a>9.吊帶背心</a> ????????????????????<a>10.連衣裙</a> ????????????????????<a?name="setColor">11.蕾絲連衣裙</a> ????????????????????<a>12.復(fù)古連衣裙</a> ????????????????????<a>13.印花連衣裙</a> ????????????????????<a>14.真絲連衣裙</a> ????????????????????<a>更多</a> ????????????????</dd> ????????????</dl> ????????</div> ????????<div?class="tag_More"?style="display:block"> ????????????<dl> ????????????????<dd> ????????????????????<p>第二類</p> ????????????????????<a>1.背帶褲</a> ????????????????????<a>2.哈倫褲</a> ????????????????????<a>3.牛仔褲</a> ????????????????????<a>4.休閑褲</a> ????????????????????<a>5.小腳褲</a> ????????????????????<a>6.西裝褲</a> ????????????????????<a>7.打底褲</a> ????????????????????<a>8.闊腳褲</a> ????????????????????<a>9.短褲</a> ????????????????????<a>10.馬甲/背心</a> ????????????????????<a>11.羽絨服</a> ????????????????????<a>12.棉服</a> ????????????????????<a>13.夾克</a> ????????????????????<a>14.POLO衫</a> ????????????????????<a>更多</a> ????????????????</dd> ????????????</dl> ????????</div>> ????</div> ????<div?id="menu_con"> ????????<h3>男裝</h3> ????????<div?class="tag"?style="display:block"> ????????????<dl> ????????????????<dd> ????????????????????<p>第一類</p> ????????????????????<a>1.襯衫</a> ????????????????????<a>2.T恤</a> ????????????????????<a>3.牛仔褲</a> ????????????????????<a>4.休閑褲</a> ????????????????????<a>5.短褲</a> ????????????????????<a>6.針織衫</a> ????????????????????<a>7.西服</a> ????????????????????<a>8.西褲</a> ????????????????????<a>9.嘻哈褲</a> ????????????????????<a>10.西服套裝</a> ????????????????????<a>11.馬甲/背心</a> ????????????????????<a?name="setColor">12.羽絨服</a> ????????????????????<a>13.棉服</a> ????????????????????<a>14.夾克</a> ????????????????????<p>更多</p> ????????????????</dd> ????????????</dl> ????????</div> ????????<div?class="tag_More"?style="display:block"> ????????????<dl> ????????????????<dd> ????????????????????<p>第二類</p> ????????????????????<a>1.襯衫</a> ????????????????????<a>2.T恤</a> ????????????????????<a>3.牛仔褲</a> ????????????????????<a?name='setColor'>4.休閑褲</a> ????????????????????<a>5.短褲</a> ????????????????????<a>6.針織衫</a> ????????????????????<a>7.西服</a> ????????????????????<a>8.西褲</a> ????????????????????<a>9.嘻哈褲</a> ????????????????????<a>10.西服套裝</a> ????????????????????<a>11.馬甲/背心</a> ????????????????????<a>12.羽絨服</a> ????????????????????<a>13.棉服</a> ????????????????????<a>14.夾克</a> ????????????????????<p>更多</p> ????????????????</dd> ????????????</dl> ????????</div>> ????</div> </div> <script?type="text/javascript"> ????//找到男裝下第一類衣服中的第一個p元素，并改變顏色 ????//可以通過子類選擇器??p:first-child?篩選出第一個p元素 ????$("#menu_con?.tag?dd>p:first-child").css('color','#9932CC'); </script> <script?type="text/javascript"> ????//找到男裝下第一類衣服把a元素從順序1-4加上顏色 ????//可以通過基本篩選器lt,選擇匹配集合中所有索引值小于給定index參數(shù)的元素 ????//注意了index是從0開始計算，所以選在1-4,為對應(yīng)的index就是4 ???$("#menu_con?.tag?dl?dd>a:lt(4)").css('color','red'); </script> <script?type="text/javascript"> ????//找到男裝所有a元素中屬性名name="setColor"的元素，并設(shè)置顏色 ????//這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素 ???$("#menu_con?[name='setColor']").css('color','blue'); </script> <script?type="text/javascript"> ????//不分男女，選中第一類衣服中第9個a元素，并改變顏色 ????//這里用了nth-child?選擇的他們所有父元素的第n個子元素 ????$("#menu?div?.tag?dl?dd>a:eq(9)").css('color','#66CD00');//這里?。。。。。。。。?</script> <script?type="text/javascript"> ????//找到女裝下第一類衣服，把a元素中包含文字"更多"的節(jié)點，改變顏色 ????$("#menu_female?.tag?dl?dd>a:last").css('color','#C71585'); </script> </body> </html>錯誤代碼