2017-12-22 11 views
-1

親要素の(button.usa-nav-link)子(スパン)にクラス(太字)を追加する必要があります。この親には、クラスactiveを含む兄弟(ul li.active)があります。アクティブな場合、親の子(スパン)はclass = "bold"を含む必要があります。兄弟の親クラスにクラスが含まれている場合は、スタイルの子である

(これは)親要素を取得していないため、子(スパン)をターゲットにできます。私は試しました:has(> .active)と結果のないいくつかの他のもの。思考?

if(jQuery("button.usa-nav-link").siblings("ul").find(".active")){ 
 
    jQuery(this).children("span").addClass("bold"); 
 
};
.bold{ 
 
    font-weight:bold; 
 
    font-size:22px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
\t <li><button aria-controls="submenu-771" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Products</span></button> 
 
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-771"> 
 
\t <li class="expanded menu-mlid-771"> 
 
\t \t <a href="/dev/products">Products</a> 
 
\t </li> 
 
\t <li class="first leaf menu-mlid-776"> 
 
\t \t <a href="/dev/content/imagery">Imagery</a> 
 
\t </li> 
 
\t <li class="last leaf menu-mlid-775"> 
 
\t \t <a href="/dev/content/web-data-services">Web Data Services</a> 
 
\t </li> 
 
</ul> 
 
</li> 
 
\t <li><button aria-controls="submenu-773" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Services</span></button> 
 
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-773"> 
 
\t <li class="expanded active-trail active menu-mlid-773"> 
 
\t \t <a class="active-trail active" href="/dev/page/services">Services</a> 
 
\t </li> 
 
\t <li class="first leaf active-trail active menu-mlid-956"> 
 
\t \t <a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a> 
 
\t </li> 
 
\t <li class="leaf active menu-mlid-953"> 
 
\t \t <a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a> 
 
\t </li> 
 
\t <li class="leaf active menu-mlid-777"> 
 
\t \t <a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a> 
 
\t </li> 
 
\t <li class="last leaf active menu-mlid-955"> 
 
\t \t <a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a> 
 
\t </li> 
 
</ul> 
 
</li>

+0

あなただけのドキュメントをチェックアウトし、 'parent'または' parentsUntil'を使用することができます! – MikeVelazco

+1

は* elements *の代わりにクラス/タグで説明しています( 'button.usa-nav-link'をクリックすると、' active'クラスがあるかどうかを親 'ul'にチェックする必要があります)if true addClass 'span = span>) –

+0

@ Mohamed-Yousefがさらに情報を追加しました。 – jasonflaherty

答えて

1

私はあなたがこのために探していると思います。

  • あなたはその特定のクラスで各ボタンをチェックを通って、「this」属性あなたループを利用することができます。あなたは「検索」機能を使用する場合

  • は、あなたはそれがfind function内で渡された値が見つかり要素の数に応じて、0かを返すかどうかを確認するために属性を使用する必要があります。

$("button.usa-nav-link").each(function(){ 
 

 
if ($(this).siblings("ul").find('.active').length){ 
 
     $(this).children("span").addClass("bold"); 
 
    } 
 
});
.bold{ 
 
    font-weight:bold; 
 
    font-size:22px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
\t <li><button aria-controls="submenu-771" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Products</span></button> 
 
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-771"> 
 
\t <li class="expanded menu-mlid-771"> 
 
\t \t <a href="/dev/products">Products</a> 
 
\t </li> 
 
\t <li class="first leaf menu-mlid-776"> 
 
\t \t <a href="/dev/content/imagery">Imagery</a> 
 
\t </li> 
 
\t <li class="last leaf menu-mlid-775"> 
 
\t \t <a href="/dev/content/web-data-services">Web Data Services</a> 
 
\t </li> 
 
</ul> 
 
</li> 
 
\t <li><button aria-controls="submenu-773" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Services</span></button> 
 
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-773"> 
 
\t <li class="expanded active-trail active menu-mlid-773"> 
 
\t \t <a class="active-trail active" href="/dev/page/services">Services</a> 
 
\t </li> 
 
\t <li class="first leaf active-trail active menu-mlid-956"> 
 
\t \t <a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a> 
 
\t </li> 
 
\t <li class="leaf active menu-mlid-953"> 
 
\t \t <a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a> 
 
\t </li> 
 
\t <li class="leaf active menu-mlid-777"> 
 
\t \t <a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a> 
 
\t </li> 
 
\t <li class="last leaf active menu-mlid-955"> 
 
\t \t <a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a> 
 
\t </li> 
 
</ul> 
 
</li>

+0

私はループするとは思わなかった。親に集中しすぎた。 – jasonflaherty

+0

@jasonflaherty問題ありません:) –

関連する問題