CODEWITHSUNDEEP
jqueryif-statementtextthiscontains
Manuel
Manuel

Reputation: 1

JQuery this "contains" with if statement

I created a function with the if statement to add a class when nav and breadcrumb text are the same. What is wrong? The if... $(this) doesn't work.... Here is the code:

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 breadcrumb code:

<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>

Upvotes: 0

Views: 411

Answers (2)

painotpi
painotpi

Reputation: 6996

Your code in the if condition is incorrect,

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

You could just compare the values with 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>

Upvotes: 0

Jamiec
Jamiec

Reputation: 136094

Theres no need to loop and use is - you can just select the element you're interested in:

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>

Upvotes: 1

Related Questions