首頁 > web前端 > js教程 > 詳解獲取jq ul第一個li定位的四​​種解決方案

詳解獲取jq ul第一個li定位的四​​種解決方案

高洛峰
發布: 2017-01-04 14:23:40
原創
1667 人瀏覽過

如果我們只是獲取一個ul中的第一個li的話,那麼我們可以這樣寫:

$("ul li:first");
$("ul li").eq(0);
$( "ul li").first();
$("ul li").slice(0,1);//slice第一個參數表示的選取開始的位置,第二個參數是結束的位置

<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
登入後複製

  解答我大概寫了四種

<script type="text/javascript">
//方案一
$(function(){
var list=$("ul");
for (var i = 0; i < list.length; i++) {
$("ul:eq("+i+") li:first").css("background","red");
 
}
});
//方案二
/*$(function(){
$("ul").each(function(){
$(this).children().first().css("background","red"); 
});
});*/
//方案三
/*$(function(){
$("ul li:nth-child(1)").css("background","red");
});*/
//方案四
/*$(function(){
$("ul li:first-child").css("background","red");
});*/
</script>
登入後複製

以上就是本文的全部內容,希望對大家有幫助,謝謝對PHP中文網的支持!

更多詳解獲取jq ul第一個li定位的四​​種解決方案相關文章請關注PHP中文網!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板