Manipulate HTML with jQuery

Question

I'm trying to style some HTML, generated from Google Calendar, it's something I don't have control off. It's plain simple HTML.

This is what I have:

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

This is what I'm trying to get:

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

With this messy code:

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

And this is what I get:

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

As you can see I have this new <a> element (why?) and both <li> texts are inside the same <span>. Twice (to be honest, the second doesn't have the "when" class). This should not be hard to do. It's just too hard for me.

Well you created an array of strings with that call to split(), and then you glue in the array without doing anything else to it. Thus, Javascript turned the array back into a string by concatenating the strings with commas between them, which is its default behavior. — Pointy
– Pointy, Commented Oct 24, 2010 at 18:09

Jason Durbin · Accepted Answer · 2010-10-24 18:18:34Z

1

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

answered Oct 24, 2010 at 18:18

Jason Durbin

3,4971 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniele Over a year ago

Too bad it groups list into the same span… <span class="when"><a xmlns="w3.org/1999/xhtml">Quando:gioQuando:gio</a></… class="day">undefined</span> thank for your help Jason.

cambraca · Accepted Answer · 2010-10-24 18:20:28Z

0

You can try this:

$('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]));
  }
});

answered Oct 24, 2010 at 18:20

cambraca

28k17 gold badges71 silver badges102 bronze badges

6 Comments

Daniele Over a year ago

thanks cambraca, this is not working... maybe I can have this string splitted into words and then assign at each word a progressive number. I.e. <div "google">when: 29 gen 2010</div> to <div "google"><span class="date 1">when:</span><span class="date 2">29</span> and so on. For me is just a question to have a dom element to style. Thank you for your help

cambraca Over a year ago

what did you get when you ran this script? I tested it on that html you put and it worked for me..

Daniele Over a year ago

I get this: <ul><li><a title="" class="tip"><span class="when"></span></a></li></ul> from this: <li><a title="" class="tip"><span class="data">Quando: gio 27 gen 2011<br><br>Dove: Guidonia Montecelio<br>Stato evento: confermato</span></a></li></ul> I have just made a test page: ottimomassimo.it/index.php/bassotto/test

cambraca Over a year ago

I see, change "Where" to "Dove" in the third line in my script. Then it will work. (I assumed you wanted to delete everything besides the date, if not you can modify this easily enough to include the rest of the data)

Daniele Over a year ago

You are right, it works well on Webkit, but not on firefox… does this makes sense?

|

Collectives™ on Stack Overflow

Manipulate HTML with jQuery

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related