Harvey Harvey -4 years ago 68
CSS Question

Change Class Name with jQuery or CSS

So i am trying to change this part of code on my website from saying 'products' to 'shop'

Image of the issue highlighted in red:

enter image description here

<strong class="breadcrumb_last">Products</strong>


The Product text in the breadcrumbs is pulling from the >Products< part as when i change this to 'Shop' it changed this in the breadcrumbs on the site.

I need a way to code this within to my website using CSS or jQuery as this is a wordpress site so it changes

<strong class="breadcrumb_last">Products</strong>


to

<strong class="breadcrumb_last">Shop</strong>


any ideas?

Thanks,

Harvey

Answer Source

Don't use $(".breadcrumb_last") as selector.
On other pages your .breadcrumb_last it might not contain the desired Products text you want to change-to Shop (See EXAMPLE 2 in the below demo)

Instead target a parent selector (#breadcrumbs in your specific case) and than go for a child - in order to make sure you don't change anything else - but the element having the "Products" string. Here's how:

$("#breadcrumbs").find('a, strong').text(function(idx, txt) {
   if(txt === "Products") return "Shop";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="breadcrumbs">

  EXAMPLE 1<br><br>

  <span>
    <span>
      <a href="#!">Home</a>
      &raquo;
      <strong class="breadcrumb_last">Products</strong>
    </span>
  </span>

  <br><br> EXAMPLE 2<br><br>

  <span>
    <span>
      <a href="#!">Home</a>
      &raquo;
      <a href="#!">Products</a> 
      &raquo;
      <strong class="breadcrumb_last">This is a product 1</strong>
    </span>
  </span>

</p>

Similarly you've could used :contains("Products") but that would also target children like <a>Dangerous Products</a> - which is clearly a dangerous thing to do :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download