Question

最近我想实现一个droplist函数，它接受一些参数并像jqueryUI插件一样动态生成一个列表。但我对如何将jquery对象添加到此对象有点困惑。现在代码是这样的：

(function($){
$.fn.dropList = function(options){
    var opts = $.extend({}, $.fn.dropList.defaults, options);
    var cList = $('ul');    
    var list=opts.itemList;
    $.each(list, function(i){
        var li = $('<li/>')
            .addClass('ui-menu-item')
            .attr('role', 'menuitem')
            .text(list[i])
            .appendTo(this);
        console.log(li[0].outerHTML);
    });
    console.log(this[0].outerHTML);
    return this;
};

$.fn.dropList.defaults = {
        name: "",
        position: {x:0, y:0},
        itemList: ['a','b','c']
    };
})(jQuery);

在html中，你只需调用：

<div id='list'></div>
<script type="text/javascript">
    $('#list').dropList({itemList: ['b','f','c']});
</script>

现在根据console.log，它正确地创建了li elem，但是当我打印这个[0] .outerHTML时，li元素没有附加到它。

console.log结果如下：

<li class="ui-menu-item" role="menuitem">b</li>
<li class="ui-menu-item" role="menuitem">f</li>
<li class="ui-menu-item" role="menuitem">c</li>
<div id="list"></div>

我想把李插入div。是否有人可以帮我找出将li元素附加到此对象的正确方法？

Answer 1

我认为问题出在你的this指针上。

更重要的是，回调是在当前的上下文中触发的 DOM元素，因此关键字this指的是迭代元素。

来自https://api.jquery.com/each/

将此存储到自变量

中

var self = this;

...

.appendTo(self);

Answer 2

在$ .each循环中，this的值将是当前循环的项目。你可以声明＆＃34;这个＆＃34;变成一个变量并用它来追加。

var appendToThis = this;
$.each(list, function(i){
    var li = $('<li/>')
        .addClass('ui-menu-item')
        .attr('role', 'menuitem')
        .text(list[i])
        .appendTo(appendToThis);
    console.log(li[0].outerHTML);
});

Answer 3

您在另一个上下文中使用this，因此this指向可迭代对象，而不是dropList容器。
您已定义cList，但未使用它。我认为这是一个错误，所以我修复了它。

解决方案：jsfiddle

jquery appendTo无法正常工作

3 个答案: