用 if 语句查询这个“包含”答案

【问题标题】：JQuery this "contains" with if statement用 if 语句查询这个“包含”
【发布时间】：2021-08-03 14:31:07
【问题描述】：

我使用 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>

【问题讨论】：

能否将相关的 HTML 添加到问题中
你真正想要达到什么目的？
我想为活动导航添加颜色

标签： jquery if-statement text this contains

【解决方案1】：

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>

【讨论】：

@Manuel 如果有帮助，请接受答案！

【解决方案2】：

无需循环使用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>

【讨论】：