Question

我目前正在使用jQuery动态创建列表。我知道下面的解决方案有些笨拙，所以我想知道是否可以将它粘在一个循环中，所以我可以迭代每个div并创建列表。谢谢你的帮助!!

         var text0 = $('#d0').text(); 
         var textArr0 = text0.split('*');

         var text1 = $('#d1').text(); 
         var textArr1 = text1.split('*');

         var text2 = $('#d2').text(); 
         var textArr2 = text2.split('*');

         $("#d0").html('<ul></ul>');
         $("#d1").html('<ul></ul>');
         $("#d2").html('<ul></ul>');


         $.each(textArr0, function (k, v) {
            $("#d0 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

         $.each(textArr1, function (k, v) {
            $("#d1 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

         $.each(textArr2, function (k, v) {
            $("#d2 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

Answer 1

这是你已经得到的整洁版本......

$(function() {
    $("#d0, #d1, #d2").each(function() {
        var text = $(this).text();
        var textArr = text.split("*");
        $(this).html("<ul></ul>");
        for(var i = 0; i < textArr.length; i++) {
            $(this).find("ul").append('<li><a>' + textArr[i] + '</a></li>');
        };
    });
});

但是，我建议给元素d0 / d1 / d2等一个类，并使用$(".className")来识别它们，这样你就可以拥有任意数量的东西，而不必更改代码。

这是一个演示...... http://jsfiddle.net/77vM9/

Answer 2

为了简化可重用性，请尝试将处理逻辑转换为插件：

(function($) {
    $.fn.listFromText = function() {
        var $source = this;
        var text = this.text();
        var delimiter = "*";

        $source.html("<ul></ul>");

        $.each(text.split(delimiter), function (k, v) {
            $("ul", $source).append('<li>' + '<a>' + v + '</a>' +  '</li>');
        });
    };
})(jQuery);

$("#d0").listFromText();
$("#d1").listFromText();
$("#d2").listFromText();

如果只需要一个页面，这可能有点过分，但如果要在整个项目中持续使用，这可能很有用。

Answer 3

(function($) {
    $.fn.textTolist = function() {
        var textArr = $(this).text().split('*'),
        target = $(this).empty().append('<ul></ul>');
        for (var i = 0; i < textArr.length; i++) {
            $('ul', target).append('<li><a>' + textArr[i] + '</a></li>');
        }
    };
})(jQuery);

$('#d0, #d1, #d2').each(function() {
    $(this).textTolist();
});

使用带有jQuery或正则表达式的for循环从多个div中的字符串中获取单词

3 个答案: