Question

我正在制作这个简单的代码，通过选择将其转换为列表，例如：

<select>
    <option>one</option>
    <option>two</option>
</select>

将成为：

<ul>
    <li>one</li>
    <li>two</li>
</ul>

当有两个选择列表成为两者的组合时问题激增（参见fiddle）

这是我正在使用的代码：

(function ($) {

    $.fn.showLikeList = function () {
        $('<ul class="show-like-list-box"></ul>').insertAfter($(this));
        $(this).children().each(function () {
            $("ul.show-like-list-box").append("<li>" + $(this).text() + "</li>");
        });
        return this;
    };

}(jQuery));

Answer 1

这是您的插件，包含2个小概念更改。

为选择器集合中的所有元素添加了each循环。

创建了<ul>元素的实例变量，而不是使用将定位所有实例的类选择器

(function ($) {

    $.fn.showLikeList = function () {
        /* should add a check to see if stylesheet already added */
        $('head').append('<link rel="stylesheet" href="files/css/show-like-list.css" type="text/css" />');

        return this.each(function (i,el) {
            $(el).addClass('show-like-list-old-element');
             /* create instance of list to add to DOM */
            var $list = $('<ul class="show-like-list-box"></ul>').insertAfter($(this));
            $(el).children().each(function (idx) { /* <== here's your <option> index*/
                /* append to list instance */           
                $list.append("<li>" + $(this).text() + "</li>");
            });
        });
    };

}(jQuery));

如果你想得到选项的索引，你可以从each的第一个参数得到它。我忘了把它添加到演示

的 DEMO

JQuery：将每个元素的索引作为数据添加到＆＃39;这个＆＃39;

1 个答案: