JQuery 这个"包含"与 if 语句

Question

当nav和breadcrumb文本相同时，我用if语句创建了一个函数来添加一个类。怎么了？if... $(this)不工作。。。。这是代码：

var $textval = $('.breadcrumb_bread li+li+li+li+li span').text();
$(".nav-child li a").each(function(){ 
if ($(this).is(":contains('" + $textval +"')")) {
$(this).parent().addClass('active');
}
});

Html面包屑代码：

<ul class="breadcrumb_bread">
<li class="active">
<span></span>
</li>
<li>
<a href="#"><span itemprop="name">Home</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>Brands</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>CCC</span></a>
<span>/</span>
</li>
<li>
<span>YYY</span>
</li>
</ul>

Html导航代码：

<ul class="nav-child">
<li>
<a href="#">XXX</a>
</li>
<li>
<a href="#">YYY</a>
</li>
<li>
<a href="#">ZZZ</a>
</li>
</ul>

Answer 1

无需循环并使用is-您只需选择感兴趣的元素：

var $textval = $('.breadcrumb_bread li+li+li+li+li span').text();
$(".nav-child li a:contains('" + $textval +"')").parent().addClass('active');

.nav-child .active{ background-color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="breadcrumb_bread">
<li class="active">
<span></span>
</li>
<li>
<a href="#"><span itemprop="name">Home</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>Brands</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>CCC</span></a>
<span>/</span>
</li>
<li>
<span>YYY</span>
</li>
</ul>
Html nav code:
<ul class="nav-child">
<li>
<a href="#">XXX</a>
</li>
<li>
<a href="#">YYY</a>
</li>
<li>
<a href="#">ZZZ</a>
</li>
</ul>

Answer 2

if条件下的代码不正确，

if($(this).is(":contains('" + $textval +"')"))

您可以将这些值与javascript进行比较。

var $textval = $('.breadcrumb_bread li:last-child span').text().trim();
$(".nav-child li a").each(function() {
// you could also use $(this).text().includes($textval) 
// if you don't need an exact match
if ($(this).text().trim() === $textval) {
$(this).parent().addClass('active')
}
});

.nav-child .active {
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="breadcrumb_bread">
<li class="active">
<span></span>
</li>
<li>
<a href="#"><span itemprop="name">Home</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>Brands</span></a>
<span>/</span>
</li>
<li>
<a href="#"><span>CCC</span></a>
<span>/</span>
</li>
<li>
<span>YYY</span>
</li>
</ul>
<ul class="nav-child">
<li>
<a href="#">XXX</a>
</li>
<li>
<a href="#">YYY</a>
</li>
<li>
<a href="#">ZZZ</a>
</li>
</ul>