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

How to split multiple string using jQuery or javascript?

本文关键字：字符串 拆分 javascript 何使用 jQuery      更新时间：2023-09-26

我知道这张贴在这里：如何使用jquery或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：

演示

谢谢苯教

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

您可以在 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>";
});

你只选择了.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>");
});

调整小提琴，供参考：http://api.jquery.com/each/

由于标题询问如何使用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>

相关文章：