ホームページ > 記事 > ウェブフロントエンド > [jquery] クラスセレクター、next、prev メソッドを組み合わせて、隣接するノードの展開と非表示の効果を実現します
[jquery] クラスセレクター、next、prev メソッドを組み合わせて、隣接するノードの展開と非表示の効果を実現します
- 巴扎黑オリジナル
- 2017-06-22 10:00:361221ブラウズ
ページ効果では、プログラムによってループアウトされた列に ID属性を追加できないことがあります。これは、複数の同一 ID をループアウトするリストが存在する可能性があるため、Jquery の ID セレクター を使用できないためです。現時点では、クラス セレクターを使用できます。
同時に、このノード要素の操作を現在の p (またはテーブル) に制限する必要がある場合もあります。コードを見てみましょう:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title >jquery效果title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript">script>
<script type="text/javascript" >
//展开隐藏层
$(document).ready(function () {
$(".part")。 click(function () {
var hideP = $(this).next();
if(hideP.css('display') == 'なし' ) {
hideP.show();
$(this).hide();
}
else {
hideP.hide();
$(this).show();
}
});
$(".all").click(function() {
var hideP = $(これ).prev( );
if (hideP.css('display') == ' none') {
hideP.show() ;
$(this).hide();
}
} }); });
<
p ='classA'> ;/
p> ;
p>
p> <
p class='classA '> <
pクラス="パート">コンテンツ2p> ="すべて"
スタイル="表示:なし"& gt;コンテンツ2 、ハハハ、私はそれを拡張しました、ここにもっとコンテンツがあります＆lt;/p＆gt;<p class="part">コンテンツ3p>
class="all" style = display:none">コンテンツ 3、ははは、拡張しました。その他のコンテンツはこちらですp>へ同じclassAの他のコンテンツ。実際、ここで焦点を当てているのは jquery next メソッドと prev メソッドの使用です。もちろん、これらは他の状況でも使用できます。
以上が[jquery] クラスセレクター、next、prev メソッドを組み合わせて、隣接するノードの展開と非表示の効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。