ホームページ  >  記事  >  ウェブフロントエンド  >  [jquery] クラスセレクター、next、prev メソッドを組み合わせて、隣接するノードの展開と非表示の効果を実現します

[jquery] クラスセレクター、next、prev メソッドを組み合わせて、隣接するノードの展開と非表示の効果を実現します

巴扎黑
巴扎黑オリジナル
2017-06-22 10:00:361237ブラウズ

ページ効果では、プログラムによってループアウトされた列に ID属性を追加できないことがあります。これは、複数の同一 ID をループアウトするリストが存在する可能性があるため、JqueryID セレクター を使用できないためです。現時点では、クラス セレクターを使用できます。

同時に、このノード要素の操作を現在の 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クラス="パート">コンテンツ2
p> ="すべて"
スタイル="表示:なし"& 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。