使用 jQuery，如何将类添加到具有 href 的元素，该元素具有活动元素的部分路径？

Question

我希望"Quick"，"Brown"和"Fox"链接具有"下拉列表"类，但不适用于"Foo"或"Bar"链接。如何使用jQuery实现这一点？

网页代码：

<ul>
<li>
<a href="/foo"> Foo </a>
</li>
<li>
<a href="/foo/bar"> Bar </a>
</li>
<li>
<a href="/quick"> Quick </a>
</li>
<li>
<a href="/quick/brown"> Brown </a>
</li>
<li>
<a href="/quick/brown/fox" class="is-active"> Fox </a>
</li>
</ul>

Answer 1

在这里，您可以使用解决方案 https://jsfiddle.net/3t9yy4ou/

var activeHref = $('.is-active').attr('href');
$('a[href]').each(function(){
if( activeHref.indexOf($(this).attr('href')) >= 0){
$(this).addClass('dropdown');
}
});

.dropdown {
background: rgba(0,0,0,0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="/foo"> Foo </a>
</li>
<li>
<a href="/foo/bar"> Bar </a>
</li>
<li>
<a href="/quick"> Quick </a>
</li>
<li>
<a href="/quick/brown"> Brown </a>
</li>
<li>
<a href="/quick/brown/fox" class="is-active"> Fox </a>
</li>
</ul>

我用过jQuery.each方法。

Answer 2

您可以使用.attr('href，'link'(将元素属性编辑为href，这将允许您进行编辑，并且还可以通过将ul引用添加到var或直接并在搜索所有$('.is-active'(后直接获得当前活动，在那里您将拥有活动值或元素名称。我希望这对你有所帮助 如果我误解了什么，请告诉我

Answer 3

获取活动元素的href

const activeHref = $('.is-active').attr('href')

然后找到所有带有href的元素，按上面的值过滤并添加类

$('[href]').filter(function() {
return activeHref.indexOf(this.getAttribute('href')) !== -1
}).addClass('whatever')

const activeHref = $('.is-active').attr('href')
$('[href]').filter(function() {
return activeHref.indexOf(this.getAttribute('href')) !== -1
}).addClass('whatever')

.is-active { font-weight: bold; }
.whatever { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="/foo"> Foo </a>
</li>
<li>
<a href="/foo/bar"> Bar </a>
</li>
<li>
<a href="/quick"> Quick </a>
</li>
<li>
<a href="/quick/brown"> Brown </a>
</li>
<li>
<a href="/quick/brown/fox" class="is-active"> Fox </a>
</li>
</ul>