Question

我需要有关此代码的帮助：

我在网址中有一个纯文本，我需要将其转换为列表（ul）以显示在页面中。列表的格式为：

* IMAGEURL
** text
* IMAGEURL2
** text2
...

我需要将其转换为：

<ul id="listaEmoticones">
      <li><img src="IMAGEURL" /> <span>text</span></li>
      <li><img src="IMAGEURL2" /> <span>text2</span></li>
      ...
</ul>

我有这段代码，但我不知道如何继续：



    $(function() {
        var $chat = $('#Chat_15028');
        $lista = $('').attr('id', 'listaEmoticones')
        $chat.prepend($lista);

        $.ajax({
            'dataType': 'text',
            'data': {
                'title': 'MediaWiki:Emoticons',
                'action': 'raw',
                'ctype': 'text/css'
            },
            'url': wgScript,
            'success': function(data) {
                var lines = data.split("\n");
                for (var i in lines) {
                    var val = (lines[i].indexOf('** ') == 0) ? lines[i].substring(3) : '';
                    var $opt = $('').text(lines[i]);
                    $lista.append($opt);
                }
            }
        });
    })

由于

编辑：感谢您的纠正，我会说西班牙语

Answer 1

这是一个类似的问题：

How to generate UL Li list from string array using jquery?

以下是您更正后的代码：

    $(function () {
        var wgScript = "http://benfutbol10.wikia.com/wiki/MediaWiki:Emoticons?action=raw&ctype=text/css";

        $.ajax({
            'dataType': 'text',
            'url': wgScript,
            'success': function (data) {
                var $chat = $('#Chat_15028');
                var $lista = $('<ul>').attr('id', 'listaEmoticones');

                $chat.prepend($lista);

                var lines = data.split("\n");

                var src, txt, $opt, $img, $span;
                for (var i = 0; i < lines.length; i++) {
                    if (lines[i].indexOf('* ') == 0) {
                        src = lines[i].substring(2);
                    } else {
                        $img = $('<img>').attr('src', src);
                        $span = $('<span>').text(lines[i].substring(3));
                        $opt = $('<li>').append($img).append($span);
                        $lista.append($opt);
                    }
                }
            }
        });
    })

这是我为证明它而制作的小提琴： http://jsfiddle.net/Es2n2/3/

    var $chat = $('#Chat_15028');
    $lista = $('<ul>').attr('id', 'listaEmoticonesB');
    $chat.prepend($lista);

    var data = "* http://images2.wikia.nocookie.net/__cb20110904035827/central/images/7/79/Emoticon_angry.png\n** (angry)\n** >:O\n** >:-O\n* http://images1.wikia.nocookie.net/__cb20110904035827/central/images/a/a3/Emoticon_argh.png\n** (argh)";

    var lines = data.split("\n");
    var src, txt, $opt, $img, $span;
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].indexOf('* ') == 0) {
            src = lines[i].substring(2);
        } else {
            $img = $('<img>').attr('src', src);
            $span = $('<span>').text(lines[i].substring(3));
            $opt = $('<li>').append($img).append($span);
            $lista.append($opt);
        }
    }

Answer 2

您当前的代码存在一些问题：

您对html元素使用的语法错误：

// this returns an empty jQuery object, not an html element
$lista = $('').attr('id', 'listaEmoticones');
// what you want is:
$lista = $('<ul>', {id: 'listaEmoticones'});

您正在使用for in循环来迭代数组。这通常是bad idea。

更简洁的版本是：

// select the element we will be appending list to
var $chat = $('#Chat_15028');
// create our list element
var $lista = $('</ul>', {'id': 'listaEmoticones'});

/* == inside your ajax success callback: */

// remove pesky asterisks and spaces
var removeReg = /\*+\s+/g;
var lines = "* IMAGEURL\n ** text\n * IMAGEURL2\n ** text2".replace(removeReg, '').split('\n');

for (var i = 0; i < lines.length; i += 2) {
  $ul.append($('<li>')
      .append($('<img>', {src: lines[i]}))
      .append($('<span>', {text: lines[i+1]}))
    );
}
// add list element to DOM
$chat.append($ul);

<强> JSBin

获取动态纯文本并创建列表jQuery

2 个答案: