Question

我有一段文字我想改成ul列表。要确定文本会破坏的位置，我想我可以使用像/的字符所以文字可能是。

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

我需要一个这样的列表。

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

我一直在尝试这样做。

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

Answer 1

试试这个：

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

Answer 2

.find()查找jQuery选择器，而不是文本。

尝试此操作，假装您的原始元素的ID为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 );

});

jQuery - 从文本创建ul列表

2 个答案: