jquery:oddセレクターの応用の詳しい説明-jsチュートリアル-php.cn

jquery:oddセレクターの応用の詳しい説明

黄舟

リリース： 2017-06-23 09:44:17

オリジナル

1759 人が閲覧しました

jQuery の :odd セレクターは、index 値が奇数であるすべての要素を照合し、それらを jQuery オブジェクトにカプセル化して返します。

このセレクターの反対は :even セレクターで、偶数のインデックス値を持つすべての要素を照合するために使用されます。

注: インデックス値は 0 から数え始めるため、奇数のインデックスにある要素は、実際には自然順序では偶数の要素です。

このセレクターは、0 から数えて奇数のインデックス値を持つ要素と一致します。
文法構造:

$(":odd")

ログイン後にコピー

このセレクターは通常、クラスセレクター、要素セレクターなどの他のセレクターと組み合わせて使用されます。例:

$("li:odd)").css("color","green")

ログイン後にコピー

上記のコードは、li 要素コレクション内の奇数インデックスを持つ li のフォントの色を緑色に設定します。
他のセレクターで使用されていない場合は、デフォルトで * セレクターで使用されます。 $(": od") は $("*: od") と同等です
コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    $("li:odd").css("color","blue"); 
  }); 
}); 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>jQuery专区</li>
  <li>Javascript专区</li>
</ul>
<button id="btn">点击查看效果</button>
</body>
</html>

ログイン後にコピー

戻り値

セレクターに一致する DOM 要素内の奇数のインデックス値を持つ DOM 要素をカプセル化する jQuery オブジェクトを返しますセレクタ。

セレクターに一致する要素が 2 つ未満の場合は、空の jQuery オブジェクトが返されます。

例と説明

次の HTML コードを例に挙げます:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

ログイン後にコピー

ここで、自然な順序が偶数 (インデックス値が奇数) である div タグを見つけたい場合は、次の jQuery コードを記述できます:

// 选择了id为n2的一个元素
$("div:odd");

ログイン後にコピー

次に、すべての ul タグの中で自然な順序が偶数である (インデックス値が奇数である) li タグを見つけるには、次の jQuery コードを記述します:

// 选择了id分别为n5、n9的两个元素
$("ul li:odd");

ログイン後にコピー

jquery:oddセレクターの応用の詳しい説明

以上がjquery:oddセレクターの応用の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。