内容のあるDivがあります
<div id="dv">
<ul><li><a class="html">abcd</a></li></ul>
<ul><li><a class="bold">cdef</a></li></ul>
<ul><li><a class="bold">xyz</a></li></ul>
</div>
2番目と3番目のulを動的に表示したい。どうやってやるの ?
内容のあるDivがあります
<div id="dv">
<ul><li><a class="html">abcd</a></li></ul>
<ul><li><a class="bold">cdef</a></li></ul>
<ul><li><a class="bold">xyz</a></li></ul>
</div>
2番目と3番目のulを動的に表示したい。どうやってやるの ?
divのすべての子を見つけて非表示にし、withクラスul
を含むものを見つけて次のことを示すことができます。li
"html"
ul
$("#dv").children('ul').hide().find('li.html').closest('ul').show();
それは何をしますか:
$("#dv")
-関連するdivを検索します.children('ul')
ul
-要素である子を検索します.hide()
-それらを非表示にします.find('a.html')
-クラスを持つa
それらの内の要素を検索しますul
"html"
.closest('ul')
-その要素ul
を含むものを取得しますa
.show()
-それを表示します私が考えることができる最も簡単なのはこれです
$("#dv li a:not(.html)").parent().hide();
編集:@ByScriptsはのclosest()
代わりに使用することを提案しましたparent()
。
$("#dv li a:not(.html)").closest("ul").hide();
以下でご利用いただけますjQuery
$("#dv ul:nth-child(2),#dv ul:nth-child(3)").hide()
これは、あなたの望むことですか?
$("#dv ul").hide(); // hide all divs
$("#dv a.html").closest("ul").show(); // show the div that contains a.html
最初のul以外のすべてのulを表示したくない場合は、次のコードを試してください。
$("#dv ul").css('display','none');
if($("#dv ul").hasClass('html')){
$(".html").closest('ul').('display','block');
}
要件が2番目と3番目を非表示にすることである場合は、スライスを使用することをお勧めしますul
。
$('#dv ul').slice(1).hide();
<li>
私が理解した限りでは、 with a
クラス'html'を削除したいと思います。以下はコードです
$("#div ul li a.html").hide(function(){
$(this).parent().hide();
});
xFortyFourxの回答に基づく:
$("#dv a:not(.html)").closest('ul').hide();
編集:多くの参加者がタイトルを読んでいないと思います。OPは要素<ul>
に応じて非表示にしたいと考えています。解決策ではありません;)class="html"
<a>
slice()