Question

我知道这张贴在这里：how to split the string using jquery or javascript

但在我的情况下有多个字符串。它在单行字符串中工作，但如果它在多行中，它会反复重复。由于某种原因，它只显示第一个'li'值。是否可以这样显示：

<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>

这是我的代码：

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

脚本：

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

感谢Bon

Answer 1

您将从第一个元素获取文本，并更改所有元素以包含该代码的代码。您需要循环遍历元素并转换每个元素中的内容。

您可以在html方法中使用回调函数来执行此操作，它将从每个元素获取原始HTML代码，并返回该元素的新HTML代码：

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

演示：http://jsfiddle.net/Guffa/815c95jn/1/

（注意功能上的差异，因为这将获得每个元素中的HTML代码而不是文本。只要元素中没有实际的HTML标记，就像在您的示例中一样，结果没有区别。）

分割文字的另一种方法是使用replace：

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

Answer 2

您只选择了一个.date，但您必须遍历所有这些内容，例如使用$.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>");
});

已调整Fiddle，以供参考：http://api.jquery.com/each/

Answer 3

由于标题询问如何使用jQuery或Javascript（假设是vanilla JS）完成此操作，让我简单介绍一下如何在不需要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>

如何使用jQuery或javascript分割多个字符串？

3 个答案: