使用jQuery操作HTML

我正在尝试设计一些HTML，从中生成，这是我无法控制的。它是简单的HTML

这就是我所拥有的：

    <li><a><span class="data">When: gio 27 gen 2011<br /><br />Where: XXXX<br />Event state: confirmed</span></a></li>
<li><a><span class="data">When: gio 20 gen 2011<br /><br />Where: XXXX<br />Event state: confirmed</span></a></li> 

时间：gio 27 gen 2011

地点：XXXX
事件状态：已确认
时间：gio 20 gen 2011

其中：XXXX
事件状态：已确认

这就是我想要得到的：

<li>
    <a>
        <span class="when">When:</span>
        <span class="day">gio</span>
        <span class="number">27</span>
        <span class="month">gen</span>
    </a>    
</li>
<li>
    <a>
        <span class="when">When:</span>
        <span class="day">gio</span>
        <span class="number">20</span>
        <span class="month">gen</span>
    </a>    
</li>

什么时候：
新闻局
27
消息


什么时候：
新闻局
20
消息

使用这种混乱的代码：

$(function(){
    var words = $('div.data').text().split(" ");    
    $("div.data").html("<span>" + words + "</span>");
    $("div.data span:first").addClass("when");  
});

$（函数（）{
var words=$（'div.data'）.text（）.split（“”）；
$（“div.data”）.html（“+words+”）；
$（“div.data span:first”）.addClass（“when”）；
});

这就是我得到的：

   <li>
    <a title="" class="tip">
        <div class="data">
            <span class="when">
                <a xmlns="http://www.w3.org/1999/xhtml">when:,gio,27,gen,2011
where:,XXX,XXX
Event,state:,confirmedWhen:,gio,20,gen,2011
where:,XXX,XXX
Event,sate:,confirmed
                </a>
            </span>
        </div>
    </a>    
</li>

时间：2011年11月27日，新闻局
其中：，XXX，XXX
事件，状态：，确认时间：，gio，20，gen，2011
其中：，XXX，XXX
事件，状态：，已确认

如你所见，我有这个新元素（为什么？），两个

文本都在同一个元素中。两次（老实说，第二次没有“when”类）。这应该不难做到。这对我来说太难了。

$（函数（）{
$(function(){
    var words = $('div.data').text().split(" ");    
    $("div.data").html("<span class='when'>" + words[0] + "</span>");
    $("div.data").append("<span class='day'>" + words[1] + "</span>");
    //...etc
});

var words=$（'div.data'）.text（）.split（“”）；
$（“div.data”）.html（“+words[0]+”）；
$（“div.data”）.append（“+字[1]+”）；
//…等等
});

$（函数（）{
var words=$（'div.data'）.text（）.split（“”）；
$（“div.data”）.html（“+words[0]+”）；
$（“div.data”）.append（“+字[1]+”）；
//…等等
});

您可以尝试以下方法：

$('span.data').each(function() {
  var text = $(this).text();
  text = text.substr(0, text.indexOf("Where")); //remove stuff from "Where:"
  var words = text.split(" ");
  var parent = $(this).parent();
  $(this).remove();
  var classes = ["when", "day", "number", "month", "year"];
  for (var i = 0; i < words.length; i++) {
    parent.append($("<span />").addClass(classes[i]).text(words[i]));
  }
});

$（'span.data'）。每个（函数（）{
var text=$（this.text（）；
text=text.substr（0，text.indexOf（“Where”）；//从“Where:”中删除内容：
var words=text.split（“”）；
var parent=$（this.parent（）；
$（this.remove（）；
风险值类别=[“何时”、“日”、“数”、“月”、“年”]；
for（var i=0；i

您可以尝试以下方法：

$('span.data').each(function() {
  var text = $(this).text();
  text = text.substr(0, text.indexOf("Where")); //remove stuff from "Where:"
  var words = text.split(" ");
  var parent = $(this).parent();
  $(this).remove();
  var classes = ["when", "day", "number", "month", "year"];
  for (var i = 0; i < words.length; i++) {
    parent.append($("<span />").addClass(classes[i]).text(words[i]));
  }
});

$（'span.data'）。每个（函数（）{
var text=$（this.text（）；
text=text.substr（0，text.indexOf（“Where”）；//从“Where:”中删除内容：
var words=text.split（“”）；
var parent=$（this.parent（）；
$（this.remove（）；
风险值类别=[“何时”、“日”、“数”、“月”、“年”]；
for（var i=0；i

您通过调用

split（）

创建了一个字符串数组，然后在不做任何其他操作的情况下粘合到数组中。因此，Javascript通过在字符串之间使用逗号连接字符串（这是它的默认行为）将数组重新转换为字符串。您通过调用

split（）

，创建了一个字符串数组，然后在不对数组做任何其他操作的情况下粘合数组。因此，Javascript通过在字符串之间连接逗号将数组转换回字符串，这是它的默认行为。。。也许我可以把这个字符串分成几个字，然后在每个字上指定一个累进数。即时间：2010年第29代至时间：29，依此类推。对我来说，这只是一个需要设置dom元素样式的问题。感谢您的帮助运行此脚本时您得到了什么？我在你放的html上测试了它，它对我有效。我得到了这个：

• 我明白了，在我的脚本的第三行中将“Where”改为“Dove”。那就行了。（我假设你想删除除日期之外的所有内容，如果不想，你可以很容易地修改它以包含其余的数据）你是对的，它在Webkit上运行良好，但在firefox上运行不好…这有意义吗？谢谢cambraca，这不起作用。。。也许我可以把这个字符串分成几个字，然后在每个字上指定一个累进数。即时间：2010年第29代至时间：29，依此类推。对我来说，这只是一个需要设置dom元素样式的问题。感谢您的帮助运行此脚本时您得到了什么？我在你放的html上测试了它，它对我有效。我得到了这个：
  • 我明白了，在我的脚本的第三行中将“Where”改为“Dove”。那就行了。（我假设您想删除除日期之外的所有内容，如果不想，您可以很容易地修改此内容以包含其余数据）您是对的，它在Webkit上运行良好，但不是在firefox上…这有意义吗？太糟糕了，它将列表分为相同的范围…Quando:gioQuando:gioundefined谢谢你的帮助Jason。太糟糕了，它将列表分为相同的范围…Quando:gioQuando:gioundefined谢谢你的帮助Jason。