Split multiple class with same name using loop

Question

I have a multiple tag in my webpage with the same class called price. Each tag is of that form

<p class="price">Price: 45$</p>
<p class="price">Price: 32$</p>

What I need at the end is to separate the price text in a span and the price in another so that it will be like that

<p class="price"><span class='h1'>Price:</span> <span class="h2">45$</span></p>

This is what I do until now but problem is that the span is not a tag but is insert as a simple string

let price = $(".price");
for (let i = 0; i < price.length; i++) {
    let priceTitle = price[i].innerText.split(":")[0];
    let priceToPay = price[i].innerText.split(":")[1];
    price[i].innerText = ''; //Delete content of price
    

    $(".price")[i].append("<span class='h1'>"+ priceTitle+"</span> <span class='h2'>"+ priceToPay +"</span>");

}

}

Can you help me fix this issue and perhaps optimize the code I already do.

There is no such thing as some errors. Each error has a message that you should read and include here if you are asking — Konrad
– Konrad, Commented Nov 15, 2022 at 15:58
this wont fix ur issue (idk what issue r u having, share the errors), but u don't need to split the same thing 2 times, u can do the following let splitted = myString.split(':'); let one = splitted[0]; let two = splitted[1], etc — ericmp
– ericmp, Commented Nov 15, 2022 at 16:03
@ericmp See edit. Problem is that insert the span as a string and not as a tag — Rony Cohen
– Rony Cohen, Commented Nov 15, 2022 at 16:05

Adam · Accepted Answer · 2022-11-15 16:18:46Z

You've just a few syntax errors e.g. you've set priceToPay then used price_toPay in your final line of code. Also jQuery.append() method is setting your content as textContent and not HTML but just use innerHTML instead. I've added a button for you to click so you can see the before and after effects. See below

window.onload = () => {
  document.getElementById('mybutton').addEventListener('click', doFormat);
}

function doFormat() {
  let price = $(".price");
  for (let i = 0; i < price.length; i++) {
    const priceTextContentArray = price[i].innerText.split(":");
    let priceTitle = priceTextContentArray[0];
    let priceToPay = priceTextContentArray[1];

    price[i].innerHTML =
      "<span class='h1'>" +
      priceTitle +
      "</span> <span class='h2'>" +
      priceToPay +
      "</span>";
  }
}

.h1 {
  background-color: skyblue;
}

.h2 {
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>

<button id='mybutton'>Format</button><br>


<p class="price">Price: 45$</p>
<p class="price">Price: 32$</p>

Kaddath · Accepted Answer · 2022-11-15 16:58:28Z

1

If you want to do it "the jQuery way", to build elements from strings you must use the $ constructor:

replace:

price[i].innerText = ''; //Delete content of price
$(".price")[i].append("<span class='h1'>"+ priceTitle+"</span> <span class='h2'>"+ priceToPay +"</span>");

by:

$(price[i]).html('').append( $("<span class='h1'>"+ priceTitle +"</span> <span class='h2'>"+ priceToPay +"</span>") );

As you see in jQuery you can also chain the calls, and use the .html() or .text() dedicated functions. html is more suitable here as you want to delete all inside your element, not just the text part

Notice that I also corrected your $(".price")[i] to $(price[i]), it is safer to use the var you loop on instead of doing a new jQuery selection and assume it will have the same index as in your loop

edited Nov 15, 2022 at 16:58

answered Nov 15, 2022 at 16:47

Kaddath

6,1511 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

Split multiple class with same name using loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related