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

时间:2014-12-11 00:20:49

标签: javascript jquery html css

我知道这张贴在这里: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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

您只选择了一个.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/

答案 2 :(得分:0)

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