1

次の「ddol」が非表示になっている場合に「dt」にクラスを追加したいdlistがあります。

以下の例では、dd.dd2 olが非表示になっているので、上のdtを折りたたむ（クラスを追加する）ようにします。

Stackoverflowでこれを見つけました：jqueryで<dd>なしで<dt>を削除

$('dt').filter(function(){
                     return !($(this).next().is('dd'));
               }).remove();

似たようなことを試しました：

$('#someID dt').filter(function(){
                     return ($(this).next().is('dd ol').css('display') == 'none');
               }).addClass('collapsed');

HTML：

<dl id="someID">
<dt class="dt1">List1<span>&nbsp;</span></dt>
<dd class="dd1" >
<ol>
<li class="listitem1"><a href="#" title="listitem1">listitem1</a></li>
<li class="listitem2"><a href="#" title="listitem2"><span class="txt">listitem2</span></a></li>
<li class="listitem3"><a href="#" title="listitem3"><span class="icon">&nbsp;</span><span class="txt">listitem3</span></a></li>
</ol>
</dd>

<dt class="dt2">List2<span>&nbsp;</span></dt>
<dd class="dd2" >
<ol style="display: none;">
<li class="listitem1"><a href="#" title="listitem1">listitem1</a></li>
<li class="listitem2"><a href="#" title="listitem2"><span class="txt">listitem2</span></a></li>
<li class="listitem3"><a href="#" title="listitem3"><span class="icon">&nbsp;</span><span class="txt">listitem3</span></a></li>
</ol>
</dd>

<dt class="dt3">List3<span>&nbsp;</span></dt>
<dd class="dd3" >
<ol>
<li class="listitem1"><a href="#" title="listitem1">listitem1</a></li>
<li class="listitem2"><a href="#" title="listitem2"><span class="txt">listitem2</span></a></li>
<li class="listitem3"><a href="#" title="listitem3"><span class="icon">&nbsp;</span><span class="txt">listitem3</span></a></li>
</ol>
</dd>
</dl>

しかし、うまくいきませんでした。

4

2 に答える 2

1

最も簡単なアプローチは、:hiddenセレクターを使用することです。

$('dl#someID dd ol:hidden').parent().prev('dt').addClass('collapsed');

http://jsfiddle.net/mblase75/mULNu/

于 2012-10-19T15:01:34.967 に答える
1

フィルタ関数でこれを試してください。

return $(this).next().is('dd').has('ol:hidden').length > 0;
于 2012-10-19T15:02:06.143 に答える