0

このコードについて助けが必要です:

URL にプレーン テキストがあり、それをリスト (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);
                }
            }
        });
    })

ありがとう

編集：訂正していただきありがとうございます、私はスペイン語を話します

4

2 に答える 2

1

ここに同様の質問があります：

jqueryを使用して文字列配列からUL Liリストを生成するには?

修正されたコードは次のとおりです。

    $(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);
        }
    }
于 2013-10-26T17:23:53.850 に答える
0

現在のコードにはいくつかの問題があります。

  1. HTML要素に使用している構文が間違っています:

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

  2. for inループを使用して配列を反復処理しています。これは通常、悪い考えです。

より簡潔なバージョンは次のようになります。

// 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);

JSビン

于 2013-10-26T17:49:11.103 に答える