ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryでのprev()メソッドの使用例

jQueryでのprev()メソッドの使用例

巴扎黑
リリース: 2017-06-30 14:01:53
オリジナル
2204 人が閲覧しました

この記事では、

jQueryにおける prev() メソッドの使い方を主に紹介し、prev() メソッドの機能と定義を例とともに分析し、一致する要素内の各要素の直前の兄弟要素を取得する使用スキルを説明します。参考に、

この記事の例では、jQuery の prev() メソッドの使用方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

このメソッドは、一致する要素セット内の各要素の直前の兄弟要素を取得します。 兄弟要素のコレクションはセレクターを通じてフィルター処理できます。

文法構造:

コードは次のとおりです:

$(selector).prev(expr)
ログイン後にコピー

パラメータリスト:

パラメータ説明
exprオプション。前の兄弟要素をフィルタリングするために使用される Expression

コード例:

例 1:

コードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" /> 
<title>prev()
函数
-PHP中文网</title> 
<style type="text/css">
.father{
  height:200px;
  width:200px;
  border:1px solid blue;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $(".father p").prev().css("color","blue")
})
</script>
</head>
<body>
<p class="father">
  <p>我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <p>我是p元素</p>
</p>
</body>
</html>
ログイン後にコピー

上記のコードは、クラス

属性の値を設定できます。親要素 p 要素セット内の各 p 要素の前の要素のフォントの色が青に設定されます。

例 2:

コードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" /> 
<title>prev()函数-PHP中文网</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("li").prev(".js").css("color","red"); 
}) 
</script> 
</head> 
<body> 
<p> 
  <ul> 
    <li>HTML专区</li> 
    <li class="js">Javascript专区</li> 
    <li>p+Css专区</li> 
    <li>Jquery专区</li> 
  </ul> 
</p> 
</body> 
</html>
ログイン後にコピー

上記のコードは、すべての li 要素のコレクション内の各 li 要素の前にある class 属性値が js である要素のフォントの色を赤に設定できます。

以上がjQueryでのprev()メソッドの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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