ホームページ > ウェブフロントエンド > jsチュートリアル > jq ulの最初のli位置を取得するための4つの解決策の詳細な説明

jq ulの最初のli位置を取得するための4つの解決策の詳細な説明

高洛峰
リリース: 2017-01-04 14:23:40
オリジナル
1669 人が閲覧しました

ul の最初の li だけを取得する場合は、次のように書くことができます:

$("ul li:first");
$("ul li").eq(0);
$( "ul li").first();
$("ul li").slice(0,1);//slice の最初のパラメータは選択範囲の開始位置を表し、2 番目のパラメータは終了位置です

<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 中国語 Web サイトをサポートしていただきありがとうございます。

さらに詳しい説明については、PHP 中国語 Web サイトにある、jq ul の最初の li 位置決めの 4 つの解の取得に関する関連記事に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート