Question

我需要在父元素（button.usa-nav-link）子元素（span）中添加一个类（粗体）。这个父级有一个包含类.active的兄弟（ul li.active）。如果它处于活动状态，则父母的子（span）应包含class =＆＃34; bold＆＃34;。

（这）没有拿起父元素，所以我可以瞄准孩子（跨度）。我尝试过：has（＆gt; .active）和其他一些没有结果的东西。想法？

＆＃13;

if(jQuery("button.usa-nav-link").siblings("ul").find(".active")){
     jQuery(this).children("span").addClass("bold");
};

＆＃13;

.bold{
  font-weight:bold;
  font-size:22px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<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">
	<li class="expanded menu-mlid-771">
		<a href="/dev/products">Products</a>
	</li>
	<li class="first leaf menu-mlid-776">
		<a href="/dev/content/imagery">Imagery</a>
	</li>
	<li class="last leaf menu-mlid-775">
		<a href="/dev/content/web-data-services">Web Data Services</a>
	</li>
</ul>
</li>
	<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">
	<li class="expanded active-trail active menu-mlid-773">
		<a class="active-trail active" href="/dev/page/services">Services</a>
	</li>
	<li class="first leaf active-trail active menu-mlid-956">
		<a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a>
	</li>
	<li class="leaf active menu-mlid-953">
		<a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a>
	</li>
	<li class="leaf active menu-mlid-777">
		<a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a>
	</li>
	<li class="last leaf active menu-mlid-955">
		<a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a>
	</li>
</ul>
</li>

＆＃13;

Answer 1

我认为你正在寻找这个。

您可以循环使用“this”属性并使用特定类检查每个按钮

当您使用“查找”功能时，您需要使用长度属性来检查它是否返回 0 ，具体取决于元素的数量找到find function内传递的值。

$("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> <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"> <li class="expanded menu-mlid-771"> <a href="/dev/products">Products</a> </li> <li class="first leaf menu-mlid-776"> <a href="/dev/content/imagery">Imagery</a> </li> <li class="last leaf menu-mlid-775"> <a href="/dev/content/web-data-services">Web Data Services</a> </li> </ul> </li> <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"> <li class="expanded active-trail active menu-mlid-773"> <a class="active-trail active" href="/dev/page/services">Services</a> </li> <li class="first leaf active-trail active menu-mlid-956"> <a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a> </li> <li class="leaf active menu-mlid-953"> <a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a> </li> <li class="leaf active menu-mlid-777"> <a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a> </li> <li class="last leaf active menu-mlid-955"> <a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a> </li> </ul> </li>

如果兄弟的父母包含类，则父母的样式子

1 个答案: