如何使用jQuery或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

Answer 1

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>";
});

Answer 2

You only selected one .date , but you have to iterate over all of them, eg 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/

Answer 3

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>