CODEWITHSUNDEEP
javascriptjquery
Ryan
Ryan

Reputation: 21

Can I edit a class without removing it?

I've got different languages on my website. Every language has the same products with a different class name per product. so lets say we've got this:

<div id="post-2036" class="willy peter pieter don donkey">
  <div class="product1 productiana prodonnie">Product 1</div>
  <div class="product2 prengdenga prodnie">Product 2</div>
  <div class="product3 oestnak ifweuhiw">Product 3</div>
  <div class="product4 iuerghreiuh ruehreiuh ">Product 4</div>
  <div class="product5 iuerghreiuh ruehreiuh ">Product 5</div>
</div>

This is the same for every language. As you can see every class has multiple classnames, and I only need the first classname to get the initials of the language that is currently active.

I got the language initials out of the url by using

var url = window.location.pathname.split('/')[1];

now I only have to use the outcome of 'url' to be added to the product1, product2, product3 classnames etc.

So that eventually it will look like this (when the user is on the italian page for example):

<div id="post-2036" class="willy peter pieter don donkey">
  <div class="product1_it productiana prodonnie">Product 1</div>
  <div class="product2_it prengdenga prodnie">Product 2</div>
  <div class="product3_it oestnak ifweuhiw">Product 3</div>
  <div class="product4_it iuerghreiuh ruehreiuh ">Product 4</div>
  <div class="product5_it iuerghreiuh ruehreiuh ">Product 5</div>
</div>

I hope I stated my question clearly enough, if not please let me know, thanks a lot!

Upvotes: 1

Views: 87

Answers (5)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Follow below approach:-

1.Get class first.

2.Add url value to it.

3.Add this class back to the div

Working snippet:-

$(document).ready(function(){

 var url = 'it';
 
 $('div#post-2036').find('div').each(function(){
     var class_array = $(this).attr('class').split(' ');// split classes to make it array
     class_array[0] = class_array[0]+'_'+url; // add lang value to first class
     $(this).removeClass().addClass(class_array.join(' ')); // now add the new class to div
 });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-2036" class="willy peter pieter don donkey">
  <div class="product1 productiana prodonnie">Product 1</div>
  <div class="product2 prengdenga prodnie">Product 2</div>
  <div class="product3 oestnak ifweuhiw">Product 3</div>
  <div class="product4 iuerghreiuh ruehreiuh ">Product 4</div>
  <div class="product5 iuerghreiuh ruehreiuh ">Product 5</div>
</div>

Upvotes: 3

Asons
Asons

Reputation: 87191

The absolute simplest, and most preformant solution is to take the language variable you got from the url, and add it as a class on the html element.

With that you can then use that class, combined with e.g. the product1 and do like this:

Script

(function (d,url) {
    d.classList.add(url);
})(document.documentElement,window.location.pathname.split('/')[1]);

HTML

<html class='it'>

CSS

.it .product1 {

}

Or using an attribute

Script

(function (d,url) {
    d.setAttribute('data-lang',url);
})(document.documentElement,window.location.pathname.split('/')[1]);

HTML

<html data-lang='it'>

CSS

[data-lang='it'] .product1 {

}

Upvotes: 1

4b0
4b0

Reputation: 22323

You can find 1st class add something to class (in your case comes from url ) remove old class and add new class.

var url = 'it';
$('#post-2036').find('div').each(function(index, element) {
  var cls = $(this).attr('class');
  var st = cls.split(' ');
  var firstClass = st[0];
  var newClass=st[0]=firstClass+'_'+url
  console.log(newClass);
  $(this).removeClass(firstClass).addClass(newClass);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-2036" class="willy peter pieter don donkey">
  <div class="product1 productiana prodonnie">Product 1</div>
  <div class="product2 prengdenga prodnie">Product 2</div>
  <div class="product3 oestnak ifweuhiw">Product 3</div>
  <div class="product4 iuerghreiuh ruehreiuh ">Product 4</div>
  <div class="product5 iuerghreiuh ruehreiuh ">Product 5</div>
</div>

Upvotes: 0

MauriceNino
MauriceNino

Reputation: 6757

You can use the .attr() function of jQuery to change the class tag of the elements by hand.

Also you can use the .find() function to find elements with regex.

Upvotes: 0

Nikola Lukic
Nikola Lukic

Reputation: 4244

You cant make it just like that.

Better way to have one language one identification class.

<div id="post-2036" class="willy peter pieter don donkey">
  <div class="product1 english productiana prodonnie">Product 1</div>
  <div class="product2 english prengdenga prodnie">Product 2</div>
  <div class="product3 english oestnak ifweuhiw">Product 3</div>
  <div class="product4 english iuerghreiuh ruehreiuh ">Product 4</div>
  <div class="product5 english iuerghreiuh ruehreiuh ">Product 5</div>
</div>

Than when you switch to other language remove english and add new class french.

More better way to put english language class just on one place in container for example.

Except your product can be on one page in more different languages.

Upvotes: 0

Related Questions