jQuery - Create ul list from text

Question

I have a block of text I would like to change to an ul list. To determine where the text would break I thought I could use a character like / So the text might be.

    <p>
      /Red Car/Green Car/Black Car
    </p>

I need a list like this.

    <ul>
      <li>Red Car</li>
      <li>Green Car</li>
      <li>Black Car</li>
    </ul>

I've been trying to do it like this.

      $(function(){
        var list = '';
        $('.whatWeDo').find('=').each(function(){ //.whatWeDo id the <p>
            list += '<li>' + $(this).next() + '</li>';
        });
        var theList = $('ul').append(list);
        $('.whatWeDo').html(theList);
      })

What is the question here? Please edit the post with details about what behavior you are looking for that you aren't seeing, any errors, etc. — Scott S
– Scott S, Commented Feb 6, 2013 at 17:11

j08691 · Accepted Answer · 2013-02-06 17:14:52Z

2

Try this:

var items = $('p').text().trim().split('/');
$('p').replaceWith('<ul>');
for (var i = 0; i < items.length; i++) {
    if(items[i].length >0) $('ul').append('<li>' + items[i] + '</li>');
}

jsFiddle example

answered Feb 6, 2013 at 17:14

j08691

209k33 gold badges269 silver badges281 bronze badges

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

Comments

supertrue · Accepted Answer · 2013-02-06 17:30:36Z

1

.find() looks for a jQuery selector, not text.

Try this, which pretends that your original element has an id of original:

jQuery(function ($) {

    // Get your original list, and its text
    var $original = $('#original');
    var text = $original.text();

    // Split the text at every '/', putting the results into an array
    var listItems = text.split('/');

    // Set up a new list
    var $list = $('<ul></ul>');

    // Loop through the list array, adding an <li> for each list item
    listItems.each(function(item){
        $list.append('<li>' + item + '</li>');
    });

    // Replace the old element with the new list  
    $original.replaceWith( $list );

});

edited Feb 6, 2013 at 17:30

answered Feb 6, 2013 at 17:23

supertrue

2,0996 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery - Create ul list from text

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related