Split multiple class with same name using loop-CodePudding

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

<p >Price: 45$</p>
<p >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 ><span class='h1'>Price:</span> <span >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.

CodePudding user response：

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 >Price: 45$</p>
<p >Price: 32$</p>

CodePudding user response：

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