How to split multiple string using jQuery or javascript?

Question

I know this been posted here: how to split the string using jquery or javascript

but in my case have multiple strings. It's working in a single line of string but if it's in a multiple lines it repeats the day after year. and for some reason it display's only the first 'li' value. Is it possible to display it this way:

<ul>
<li>
    <div class="date">
        <p class='day'>23</p>
        <p class='month'>05</p>
        <p class='year'>2013</p>
    </div>
</li>
<li>
    <div class="date">
        <p class='day'>25</p>
        <p class='month'>07</p>
        <p class='year'>2014</p>
    </div>
</li>
<li>
    <div class="date">
        <p class='day'>01</p>
        <p class='month'>05</p>
        <p class='year'>2014</p>
    </div>
</li>
</ul>

here is my code:

html

<ul> <li><div class="date">23-05-2013</div></li> <li><div class="date">25-07-2014</div></li> <li><div class="date">01-05-2014</div></li> </ul>

css:

.day{color:#ccc;}
.month{color:#ff0000;}
.year{color:green;}

script:

var data =$('.date').text();
var arr = data.split('-');
$(".date").html("<p class='day'>"+arr[0]+"</p>"+"<p class='month'>"+arr[1]+"</p>"+"<p cass='year'>"+arr[2]+"</p>");

jsfiddle:

demo

thanks Bon

Guffa · Accepted Answer · 2014-12-11 00:47:42Z

You are getting the text from the first element, and changes all elements to contain the code for that. You need to loop through the elements and convert the content in each one.

You can use a callback function in the html method to do that, it will get the original HTML code from each element, and you return the new HTML code for that element:

$(".date").html(function(i, h) {
    var arr = h.split('-');
    return "<p class='day'>"+arr[0]+"</p><p class='month'>"+arr[1]+"</p><p class='year'>"+arr[2]+"</p>";
});

Demo: http://jsfiddle.net/Guffa/815c95jn/1/

(Note the difference in function, as this will get the HTML code in each element instead of the text. As long as there is no actual HTML markup in the elements, like in your example, there is no difference in the result.)

An alternative to splitting the text is to use replace:

$(".date").html(function(i, h) {
    return "<p class='day'>" + h.replace("-", "</p><p class='month'>").replace("-", "</p><p class='year'>") + "</p>";
});

matthias_h · Accepted Answer · 2014-12-11 00:27:04Z

0

You only selected one .date, but you have to iterate over all of them, e.g. using $.each():

$(".date").each(function () {
  var data = $(this).text();
  var arr = data.split('-');
  $(this).html("<p class='day'>" + arr[0] + "</p>" + 
    "<p class='month'>" + arr[1] + "</p>" + "<p class='year'>" + arr[2] + "</p>");
});

Adjusted Fiddle, and for reference: http://api.jquery.com/each/

answered Dec 11, 2014 at 0:27

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Comments

Aweary · Accepted Answer · 2014-12-11 01:10:14Z

Since the title asks about how to completed this with jQuery or Javascript (assuming vanilla JS) let me give a quick example of how this might be done without the need for jQuery:

var dates = document.querySelectorAll('.date');
var dateClasses = ['day', 'month', 'year'];

Array.prototype.forEach.call(dates, function(date){
  var dateString = date.innerHTML;
  var dateStringArray = dateString.split('-');
  var content = "";
  
    for(var i = 0; i < dateStringArray.length; i++){
      
      var newDate = document.createElement('p');
      newDate.classList.add(dateClasses[i]);
      newDate.innerHTML = dateStringArray[i];
      content += newDate.outerHTML;
    
    }
  
    date.innerHTML = content;   
});

.day{color:#ccc;}
.month{color:#ff0000;}
.year{color:green;}

<ul>
    <li><div class="date">23-05-2013</div></li>
    <li><div class="date">25-07-2014</div></li>
    <li><div class="date">01-05-2014</div></li>
</ul>

Collectives™ on Stack Overflow

How to split multiple string using jQuery or javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related