詳解獲取jq ul第一個li定位的四種解決方案
更新時間：2016年11月23日 11:43:48 作者：川哥哥
本篇文章主要介紹了多個ul中獲取第一個li定位的四種解決方案，需要的朋友可以過來參考下
如果我們只是獲取一個ul中的第一個li的話，那么我們可以這樣寫：
$("ul li:first");
$("ul li").eq(0);
$("ul li").first();
$("ul li").slice(0,1);//slice第一個參數(shù)表示的選取開始的位置，第二個參數(shù)是結(jié)束的位置
<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>
運行結(jié)果
以上就是本文的全部內(nèi)容，希望對大家有所幫助，謝謝對腳本之家的支持！
相關(guān)文章
treepanel動態(tài)加載數(shù)據(jù)實現(xiàn)代碼
本文介紹一個treepanel動態(tài)加載數(shù)據(jù)的例子，需要了解的朋友可以參考下2012-12-12
jQuery插件echarts實現(xiàn)的循環(huán)生成圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的循環(huán)生成圖效果,結(jié)合完整實例形式分析了echarts插件循環(huán)輸出數(shù)字圖形的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)硪黄猨Query unbind 刪除綁定事件詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家分享一篇解決easyui日期時間框ie的兼容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
擴(kuò)展jquery實現(xiàn)客戶端表格的分頁、排序功能代碼
下面鏈接中是我用jQuery的擴(kuò)展來實現(xiàn)的表格分頁和排序，使用這個擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽，因為我是 通過<tbody>來進(jìn)行分頁的，要是不加thead，那么表頭也要作為分頁計算時的一個行了。2011-03-03
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了jquery采用oop模式class類的使用方法,結(jié)合實例形式分析了jQuery模擬oop模式定義class類與方法的技巧,需要的朋友可以參考下2016-01-01
jQuery?v3.3.1的BUG以及解決辦法(附解決方案)
這篇文章描述了我們?FineUIPro?產(chǎn)品?更新中遇到的一個問題，最終將問題定位到?jQuery.position()?函數(shù)，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個函數(shù)有沖突，并且會導(dǎo)致之前的jQuery插件出錯，應(yīng)該算是一個BUG吧2023-03-03
ASP.NET jQuery 實例4(復(fù)制TextBox的文本到本地剪貼板上)
在這節(jié)，我們將看到如何把多行文本框的內(nèi)容復(fù)制到剪貼板上。注意：jQuery clipboard plugin 只支持IE2012-01-01
這篇文章主要為大家詳細(xì)介紹了網(wǎng)頁瀑布流布局jQuery實現(xiàn)方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10