jQueryのend()メソッド_jqueryの詳しい説明-jsチュートリアル-php.cn

jQueryのend()メソッド_jqueryの詳しい説明

WBOY

リリース： 2016-05-16 15:50:15

オリジナル

1256 人が閲覧しました

end() メソッドの定義と使用法:

end() メソッドは、最後の「破壊的」操作に戻ることができます。つまり、一致する要素リストを前の状態に変更します。
破壊的な操作がない場合は、空のセットが返されます。
破壊的操作の概念: 一致した要素を変更する操作を指します。おそらく誰もがこの概念について漠然としています。例を次に示します。

$("li").css("color","red");

ログイン後にコピー

上記のコードの CSS 関数は、一致する要素のリストは変更されませんが、要素内のテキストコンテンツの CSS プロパティが変更されるため、破壊的な操作ではありません。

$("li").find(".first")

ログイン後にコピー

上記のコードは、一致する要素のリストが変更されているため、破壊的な操作です。たとえば、li 要素が 3 つある場合、find() メソッドを使用してフィルタリングすると、一致する要素のリストには 3 つの要素が含まれます。一致する要素リストが 1 つだけである場合、これは「破壊的な」操作が発生したことを意味します。
文法構造:

$(selector).end()

ログイン後にコピー

コード例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".first").find(".div").css("color","green"); 
 $(".second").find(".div").end().css("color","blue"); 
 $(".third").find(".js").css("color","blue").end().css("color","red") 
}) 
</script>
</head>
<body>
<div>
 <ul class="first">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="second">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="third">
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
</div>
</body>
</html>

ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。