> 웹 프론트엔드 > JS 튜토리얼 > jq ul의 첫 번째 li 위치 지정을 얻기 위한 4가지 솔루션에 대한 자세한 설명

jq ul의 첫 번째 li 위치 지정을 얻기 위한 4가지 솔루션에 대한 자세한 설명

高洛峰
풀어 주다: 2017-01-04 14:23:40
원래의
1667명이 탐색했습니다.

ul의 첫 번째 li만 얻으면 다음과 같이 작성할 수 있습니다.

$("ul li:first");
$("ul li"). 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>
로그인 후 복사

4가지 해결 방법에 대해 작성했습니다

<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 위치 지정을 위한 4가지 솔루션을 얻는 방법에 대한 자세한 설명을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿